webview_flutter的使用

步骤

1.配置依赖。根目录下运行如下命令：

flutter pub add webview_flutter

2.所需页面导入：

import ‘package:webview_flutter/webview_flutter.dart’;

3.初始化WebViewController

@overridevoid initState() {super.initState();_initWebViewController();}void _initWebViewController() {controller = WebViewController()..setJavaScriptMode(JavaScriptMode.unrestricted)..setBackgroundColor(const Color(0x00000000))..setNavigationDelegate(NavigationDelegate(onProgress: (int progress) {// Update loading bar.},onPageStarted: (String url) {},onPageFinished: (String url) {//页面加载完成后才能执行js_handleBackForbid();},onWebResourceError: (WebResourceError error) {},onNavigationRequest: (NavigationRequest request) {return NavigationDecision.navigate;},),)..loadRequest(Uri.parse('https://www.geekailab.com'));}

示例代码

import 'package:flutter/material.dart';
// 导入 webview_flutter 包，用于在 Flutter 应用中嵌入 WebView 来显示网页内容
import 'package:webview_flutter/webview_flutter.dart';// 定义一个名为 RelfreshPage 的有状态组件，用于展示一个包含 WebView 的页面
class RelfreshPage extends StatefulWidget {// 构造函数，Key? key 是可选参数，用于在组件树中唯一标识该组件const RelfreshPage({Key? key}) : super(key: key);// 创建该组件对应的状态类实例@overrideState<RelfreshPage> createState() => _RelfreshPageState();
}// 定义 RelfreshPage 组件对应的状态类
class _RelfreshPageState extends State<RelfreshPage> {// 定义一个 WebViewController 类型的变量 controller，用于控制 WebView 的行为// late 关键字表示该变量会在使用前被初始化late WebViewController controller;// 组件状态初始化方法，在组件创建时调用@overridevoid initState() {// 调用父类的 initState 方法，确保父类的初始化逻辑正常执行super.initState();// 调用自定义的初始化 WebView 控制器的方法_initWebViewController();}// 自定义方法，用于初始化 WebView 控制器void _initWebViewController() {// 创建一个 WebViewController 实例，并对其进行一系列配置controller = WebViewController()// 设置 JavaScript 模式为 unrestricted，表示允许在 WebView 中无限制地执行 JavaScript 代码..setJavaScriptMode(JavaScriptMode.unrestricted)// 设置 WebView 的背景颜色为透明..setBackgroundColor(const Color(0x00000000))// 设置导航委托，用于监听 WebView 的各种导航事件..setNavigationDelegate(NavigationDelegate(// 当页面加载进度发生变化时调用该回调函数，参数 progress 表示加载进度百分比onProgress: (int progress) {// 这里可以更新加载进度条，但当前代码中未实现具体逻辑// Update loading bar.},// 当页面开始加载时调用该回调函数，参数 url 表示要加载的页面的 URLonPageStarted: (String url) {},// 当页面加载完成时调用该回调函数，参数 url 表示已加载完成的页面的 URLonPageFinished: (String url) {// 页面加载完成后才能执行 js，当前代码中注释掉了具体执行逻辑// _handleBackForbid();},// 当 Web 资源加载出错时调用该回调函数，参数 error 包含错误信息onWebResourceError: (WebResourceError error) {},// 当有导航请求时调用该回调函数，参数 request 包含导航请求的信息// 根据具体情况返回 NavigationDecision.navigate 或 NavigationDecision.prevent 来决定是否允许导航onNavigationRequest: (NavigationRequest request) {// 允许所有导航请求return NavigationDecision.navigate;},),)// 加载指定 URL 的网页..loadRequest(Uri.parse('https://www.geekailab.com'));}// 构建组件的 UI 界面@overrideWidget build(BuildContext context) {// 返回一个 Scaffold 组件，它是 Flutter 中常用的页面布局组件return Scaffold(// 设置页面的顶部导航栏，显示标题为 'Flutter Simple Example'appBar: AppBar(title: const Text('Flutter Simple Example')),// 设置页面的主体内容，使用 WebViewWidget 组件来显示 WebView// 将之前初始化好的 controller 传递给 WebViewWidget，用于控制 WebView 的行为body: WebViewWidget(controller: controller),);}
}