【Flutter 必备插件】嵌入网页 webview_flutter

// 定义一个有状态的小部件，用于显示 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
    );
  }
}