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});@overrideWidget 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});@overrideWidget 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 已不推荐使用。