Flutter 网页嵌入插件 webview_flutter 的使用

概述

webview_flutter 是一个 Flutter 插件，用于在 Flutter 应用中嵌入网页。它提供了强大的功能，可以让你在应用中显示网页内容，并与网页进行交互。本文将详细介绍如何使用 webview_flutter 插件，并提供一个完整的示例。

安装

添加依赖

首先，在你的 pubspec.yaml 文件中添加 webview_flutter 依赖：

dependencies:
  flutter:
    sdk: flutter
  webview_flutter: ^4.0.0

然后运行以下命令来安装依赖：

flutter pub get

配置

Android 配置

在 android/app/src/main/AndroidManifest.xml 文件中添加互联网权限：

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.your_app">
    <application
        android:label="your_app"
        android:name="${applicationName}"
        android:icon="@mipmap/ic_launcher">
        <activity
            android:name=".MainActivity"
            android:exported="true"
            android:launchMode="singleTop"
            android:theme="@style/LaunchTheme"
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
            android:hardwareAccelerated="true"
            android:windowSoftInputMode="adjustResize">
            <!-- Specifies an Android theme to apply to this Activity as soon as
                 the Android process has started. This theme is visible to the user
                 while the Flutter UI initializes. After that, this theme continues
                 to determine the Window background behind the Flutter UI. -->
            <meta-data
              android:name="io.flutter.embedding.android.NormalTheme"
              android:resource="@style/NormalTheme"
              />
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>
                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>
        </activity>
        <!-- Don't delete the meta-data below.
             This is used by the Flutter tool to generate GeneratedPluginRegistrant.java -->
        <meta-data
            android:name="flutterEmbedding"
            android:value="2" />
    </application>
    <uses-permission android:name="android.permission.INTERNET" />
</manifest>

iOS 配置

在 ios/Runner/Info.plist 文件中添加允许加载非安全网络请求的配置：

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoads</key>
  <true/>
</dict>

使用示例

创建一个新的 Flutter 项目

如果你还没有创建 Flutter 项目，可以使用以下命令创建一个新的项目：

flutter create webview_example
cd webview_example

编写代码

在 lib/main.dart 文件中编写代码，嵌入一个简单的网页：

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(
      title: 'Flutter WebView Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter WebView Example'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late WebViewController _controller;

  @override
  void initState() {
    super.initState();
    // Enable hybrid composition.
    if (WebView.platform == null && defaultTargetPlatform == TargetPlatform.android) {
      WebView.platform = SurfaceAndroidWebView();
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: WebView(
        initialUrl: 'https://flutter.dev',
        javascriptMode: JavascriptMode.unrestricted,
        onWebViewCreated: (WebViewController webViewController) {
          _controller = webViewController;
        },
        navigationDelegate: (NavigationRequest request) {
          if (request.url.startsWith('https://www.youtube.com/')) {
            print('blocking navigation to $request}');
            return NavigationDecision.prevent;
          }
          print('allowing navigation to $request');
          return NavigationDecision.navigate;
        },
        onPageStarted: (String url) {
          print('Page started loading: $url');
        },
        onPageFinished: (String url) {
          print('Page finished loading: $url');
        },
        gestureNavigationEnabled: true,
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          _controller.loadUrl('https://flutter.dev');
        },
        child: Icon(Icons.refresh),
      ),
    );
  }
}

运行项目

在终端中运行以下命令来启动项目：

flutter run

功能说明

基本功能

• 初始 URL：通过 initialUrl 属性设置 WebView 加载的初始 URL。
• JavaScript 支持：通过 javascriptMode 属性启用或禁用 JavaScript。
• 事件监听：通过 onWebViewCreated、navigationDelegate、onPageStarted 和 onPageFinished 回调函数监听 WebView 的各种事件。
• 导航控制：通过 navigationDelegate 控制 WebView 的导航行为，例如阻止访问某些 URL。

高级功能

• 混合渲染：通过 SurfaceAndroidWebView 启用混合渲染，提高性能。
• 手势导航：通过 gestureNavigationEnabled 属性启用手势导航，使用户可以通过手势返回上一页或前进到下一页。

总结

webview_flutter 插件为 Flutter 应用提供了强大的网页嵌入功能。通过上述步骤，你可以轻松地在 Flutter 应用中嵌入网页，并与网页进行交互。希望本文对你有所帮助！

参考链接

• webview_flutter 官方文档
• Flutter 官方文档

如果你有任何问题或建议，欢迎在评论区留言！