Flutter WebView 使用指南

在开发跨平台应用时，使用 Flutter 的 WebView 插件可以方便地嵌入网页内容到应用中。WebView 可以用于显示在线网页、加载本地 HTML 文件等功能。以下是对 WebView 的一些重要信息和操作指导。

适用范围

移动端的webview组件

安装和设置

要在 Flutter 中使用 WebView，首先需要将 webview_flutter 插件添加到项目的 pubspec.yaml 文件中：

dependencies:
  flutter:
    sdk: flutter
  webview_flutter: ^x.x.x  # 确保使用最新版本

然后运行 flutter pub get 来安装该插件。

基本用法

在你的 Dart 文件中，引入 webview_flutter 包，并创建一个基本的 WebView 小部件：

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter WebView')),
        body: WebView(
          initialUrl: 'https://www.example.com',
          javascriptMode: JavascriptMode.unrestricted,
        ),
      ),
    );
  }
}

常见配置选项

initialUrl：指定初始加载的 URL。
javascriptMode：配置 JavaScript 的启用情况，常用值有 JavascriptMode.unrestricted 和 JavascriptMode.disabled。
onWebViewCreated：在创建完 WebView 控件后调用，可以用于执行一些初始化操作。
onPageStarted 和 onPageFinished：分别在页面开始加载和加载完成时触发，可以用于显示和隐藏加载进度条。
navigationDelegate：用于控制页面导航行为，比如拦截某些链接点击事件。

加载本地 HTML 文件

除了在线网页，WebView 也可以加载本地的 HTML 文件。首先，将你的 HTML 文件放置于项目的 assets 目录下，并更新 pubspec.yaml 中的资产声明：

assets:
  - assets/local_page.html

然后，在使用 WebView 时，通过 URL 表示法来引用本地文件：

WebView(
  initialUrl: Uri.dataFromString(
    '<html><body><h1>Local Page</h1></body></html>',
    mimeType: 'text/html',
    encoding: Encoding.getByName('utf-8')
  ).toString(),
)

与 JavaScript 通信

Flutter 的 WebView 支持与 JavaScript 脚本进行通信，这使得丰富的交互成为可能。可以通过 evaluateJavascript() 方法来执行 JavaScript 脚本：

controller.evaluateJavascript('document.body.style.backgroundColor = "lightblue";');

为了接收来自 JavaScript 的消息，需要使用 javascriptChannels 参数来设置监听通道：

WebView(
  ...
  javascriptChannels: <JavascriptChannel>[
    JavascriptChannel(
      name: 'Print',
      onMessageReceived: (JavascriptMessage message) {
        print(message.message);
      },
    ),
  ].toSet(),
)

在 HTML 中，可以通过如下代码发送消息给 Flutter 应用：

Print.postMessage("Hello from JavaScript!");

注意事项和限制

在 Android 上，需要确保应用具有访问网络的权限。在 AndroidManifest.xml 中添加 <uses-permission android:name="android.permission.INTERNET"/>。
iOS 平台上，WebViews 默认不支持某些特定功能，如播放媒体文件，这需要额外配置。
在进行网络请求时，确保处理好 CORS（跨资源共享）问题，以避免资源被阻止。

这些基础知识将帮助你在 Flutter 应用中有效地集成并使用 WebView 功能。随着项目需求的发展，还可以探索更多高级特性，如缓存管理、离线支持等。

🪴qql1's digital garden

探索

webview_flutter