Flutter 4.x 版本 webview_flutter 嵌套H5

踩坑早期版本 使用 WebView 代码如下

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('首页')),
      body: SafeArea(
        child: WebView(

            initialUrl: url,
    
            javascriptMode: JavascriptMode.unrestricted,

      ),
      ),
    );
  }
}

但是在flutter 会报错。很多博主都是这个写法，导致踩坑拍错很久

正确写法应该是：

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('首页')),
      body: SafeArea(
        child: WebViewWidget(
          controller:
              WebViewController()
                ..setJavaScriptMode(JavaScriptMode.unrestricted)
                ..loadRequest(Uri.parse('https://www.baidu.com')),
        ),
      ),
    );
  }
}

1. WebViewWidget

• 这是 webview_flutter 4.x 版本引入的新组件，用于替代老版本的 WebView 组件。

2. WebViewController()

• 创建一个 WebView 控制器对象。

 3.controller: ...

• 把配置好的 controller 传递给 WebViewWidget，用于控制网页加载和行为。

总结

• 这是 Dart 语言的级联操作符用法，常用于链式调用。
• WebViewWidget 是新版 webview_flutter 推荐的用法，老版的 WebView 已不推荐使用。