【Flutter 必备插件】嵌入网页 webview_flutter
2026-02-02
【Flutter 必备插件】嵌入网页 webview_flutter 关注 作者 关注 作者 关注 作者 关注 作者 2025/07/17 22:40
// 定义一个有状态的小部件，用于显示 WebView 页面
class WebViewPage extends StatefulWidget {
final String url; // 网页的 URL
final String title; // 网页的标题
final VoidCallback onBack; // 返回事件的回调
final VoidCallback onWebViewCreated; // 网页开始加载的回调
final VoidCallback onWebViewLoaded; // 网页加载完成的回调
final Function(int)? onWebViewProgress; // 网页加载进度的回调
final Function(HttpResponseError)? onWebViewError; // 网页加载错误的回调
// 构造函数，初始化各个参数
const WebViewPage({
super.key,
required this.url,
required this.title,
required this.onBack,
required this.onWebViewCreated,
required this.onWebViewLoaded,
this.onWebViewProgress,
this.onWebViewError,
});
@override
State<WebViewPage> createState() => _WebViewPageState();
}
// 定义 WebViewPage 的状态类
class _WebViewPageState extends State<WebViewPage> {
late WebViewController _controller; // 声明一个 WebViewController 对象
@override
void initState() {
super.initState();
// 初始化 WebViewController
_controller = WebViewController()
..setJavaScriptMode(JavaScriptMode.unrestricted) // 设置允许执行 JavaScript
..loadRequest(Uri.parse(widget.url)) // 加载传入的 URL
..setNavigationDelegate(
NavigationDelegate(
onPageStarted: (String url) {
// 当网页开始加载时，调用 onWebViewCreated 回调
widget.onWebViewCreated();
},
onPageFinished: (String url) {
// 当网页加载完成时，调用 onWebViewLoaded 回调
widget.onWebViewLoaded();
},
onProgress: (int progress) {
// 当网页加载进度发生变化时，调用 onWebViewProgress 回调
widget.onWebViewProgress?.call(progress);
},
onHttpError: (HttpResponseError error) {
// 当网页加载发生 HTTP 错误时，调用 onWebViewError 回调
widget.onWebViewError?.call(error);
// 显示 SnackBar 提示加载失败
if (mounted) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text('加载失败: ${error}'), // 显示错误信息
duration: Duration(seconds: 2), // 设置显示时长
),
);
}
},
),
);
}
@override
Widget build(BuildContext context) {
// 返回一个 Scaffold，包含一个 AppBar 和一个 WebViewWidget
return Scaffold(
appBar: AppBar(
title: Text(widget.title, textAlign: TextAlign.center), // 设置标题栏的标题
centerTitle: true, // 标题居中
leading: IconButton(
icon: Icon(Icons.arrow_back), // 设置返回按钮的图标
onPressed: widget.onBack, // 设置返回按钮的点击事件
),
),
body: WebViewWidget(controller: _controller), // 显示 WebView
);
}
}