【Flutter】WebView webview_flutter

文章目录

一、前言

WebView 在移动应用开发中占据了重要的地位，它为开发者提供了在应用中嵌入网页的能力。使用 WebView，你可以轻松地为用户提供丰富的网页内容，或是与第三方平台进行交互，而不需要离开应用界面。

Flutter，作为一个跨平台的 UI 工具包，自然也不能缺少 WebView 的支持。而 webview_flutter 包就是 Flutter 官方为开发者提供的 WebView 解决方案。它将 WebView 的功能与 Flutter 的组件系统完美结合，使得在 Flutter 应用中集成网页变得轻而易举。

在本文中，您将学习以下内容：

webview_flutter 包的基本使用
如何与网页内容进行交互
跨平台的支持和限制

你是否渴望成为 Flutter 的专家，掌握更多的技巧和最佳实践？我们有个好消息要告诉你！ Flutter 从零到一基础入门到应用上线全攻略 正在等待你的加入！这个专栏包含了你需要的所有 Flutter 学习资源，包括代码示例和深度解析。专栏内容会持续更新，价格也会随之上涨。现在就加入，享受最优惠的价格！此外，我们还有一个专门的讨论群，你可以点击这里 加入我们的讨论群，与其他 Flutter 学习者一起交流和学习。让我们今天就开始 Flutter 的学习之旅吧！

二、webview_flutter 包简介

webview_flutter 是 Flutter 官方提供的 WebView 插件。它支持 Android 和 iOS 平台，能够为你提供一个完整的 WebView 功能集，而不牺牲跨平台的特性。

适用平台与版本要求：

Android: 使用 Android WebView 在设备上运行
iOS: 使用 WKWebView 进行实现
请确保您的 Flutter 环境版本至少为 3.10.0，以及 Dart SDK 的版本为 3.0.0 或更高。

三、webview_flutter 的基本使用

添加 webview_flutter 依赖

在您的 pubspec.yaml 文件中添加以下依赖：
```
dependencies:
  webview_flutter: ^latest_version
```
然后运行 flutter pub get 命令来安装新的依赖。
创建 WebView 实例

使用 WebView 组件，你可以轻松地在 Flutter 应用中添加 WebView。下面是一个简单的示例：
```
WebView(
  initialUrl: 'https://www.google.com',
  javascriptMode: JavascriptMode.unrestricted,
)
```

加载和展示网页

除了使用 initialUrl 属性外，你还可以使用 WebView 控制器来加载网页。例如：

final Completer<WebViewController> _controller = Completer<WebViewController>();

WebView(
  onWebViewCreated: (WebViewController webViewController) {
      
      
    _controller.complete(webViewController);
  },
  initialUrl: 'https://www.google.com',
  javascriptMode: JavascriptMode.unrestricted,
)

基本控制：如导航、缩放等

webview_flutter 包为你提供了完整的导航控制，例如前进、后退、刷新等。你可以使用 WebView 控制器来访问这些功能。此外，你还可以通过属性来控制 WebView 的其它行为，如是否允许缩放、是否显示滚动条等。

四、与网页的交互

与网页的交互是 WebView 的一项核心功能。webview_flutter 包提供了丰富的 API，让您可以轻松实现与网页的双向交互。

JavaScript 与 Flutter 之间的通信

您可以通过 javascriptChannel 属性创建 JavaScript 通道，并通过这个通道在 Dart 和 JavaScript 之间发送消息。以下是一个示例：

WebView(
  javascriptChannels: <JavascriptChannel>[
    _toasterJavascriptChannel(context),
  ].toSet(),
  initialUrl: 'https://www.example.com',
  javascriptMode: JavascriptMode.unrestricted,
)

JavascriptChannel _toasterJavascriptChannel(BuildContext context) {
      
      
  return JavascriptChannel(
    name: 'Toaster',
    onMessageReceived: (JavascriptMessage message) {
      
      
      // 处理从 JavaScript 接收的消息
    },
  );
}

使用 WebView 控制器进行交互

除了 JavaScript 通道外，您还可以使用 WebViewController 来执行 JavaScript 代码，获取网页标题等。例如：
```
final controller = await _controller.future;
controller.evaluateJavascript('alert("Hello from Flutter!");');
```
示例：实现具体的交互功能

结合以上功能，您可以实现丰富的交互效果，如表单自动填充、页面主题自定义等。以下是一个实现自定义主题的示例代码：
```
final controller = await _controller.future;
controller.evaluateJavascript('document.body.style.backgroundColor = "lightblue";');
```

五、总结

通过本文，您已经学会了如何在 Flutter 中使用 webview_flutter 包来集成 WebView，包括基本的使用方法、与网页的交互以及跨平台的支持和限制。无论是为了展示信息，还是实现复杂的交互，webview_flutter 都是一个强大而灵活的工具。

你是否对 Flutter 感到好奇，想要深入学习？那么，Flutter 从零到一基础入门到应用上线全攻略 将是你的最佳选择！在这里，你可以找到全面的 Flutter 学习资源，包括代码示例和深度解析。你是否想知道如何用 Flutter 构建应用？所有的答案都在我们的专栏里！别再犹豫了，专栏内容会持续更新，价格也会随之上涨。现在就加入，享受最优惠的价格！让我们一起在 Flutter 的世界中探索吧！想了解更多？点击这里查看 Flutter Developer 101 入门小册专栏指引。此外，我们还有一个专门的讨论群，你可以点击这里 加入我们的讨论群，与其他 Flutter 学习者一起交流和学习。