WebView for Flutter

pub package

一个提供 WebView 组件的 Flutter 插件。

在 iOS 上,WebView 组件由 WKWebView 支持;在 Android 上,WebView 组件由 WebView 支持。

用法

eyflutter_webview 添加到你的 pubspec.yaml 文件 作为依赖项。

现在你可以将 WebView 组件包含在你的 widget 树中。有关如何使用该组件的更多详细信息,请参阅 WebView 组件的 Dartdoc。

Android 平台视图

WebView 依赖于 平台视图 将 Android 的 WebView 嵌入到 Flutter 应用中。默认情况下,使用基于虚拟显示器的平台视图后端,此实现有许多 键盘 问题。当需要键盘输入时,我们建议使用混合组合的平台视图实现。请注意,在 Android 10 及更早版本上,混合组合存在一些 性能缺点

使用混合组合

要启用混合组合,请在 initState() 中设置 WebView.platform = SurfaceAndroidWebView();。例如:

import 'dart:io';

import 'package:eyflutter_webview/eyflutter_webview.dart';

class WebViewExample extends StatefulWidget {
  @override
  WebViewExampleState createState() => WebViewExampleState();
}

class WebViewExampleState extends State<WebViewExample> {
  @override
  void initState() {
    super.initState();
    // Enable hybrid composition.
    if (Platform.isAndroid) WebView.platform = SurfaceAndroidWebView();
  }

  @override
  Widget build(BuildContext context) {
    return WebView(
      initialUrl: 'https://flutterdart.cn',
    );
  }
}

SurfaceAndroidWebView() 需要 API 级别 19。该插件本身不强制执行 API 级别,因此如果你希望应用在运行此 API 级别或更高版本的设备上可用,请将以下内容添加到 <your-app>/android/app/build.gradle

android {
    defaultConfig {
        // Required by the Flutter WebView plugin.
        minSdkVersion 19
    }
}

为 Android 启用 Material Components

要在使用 WebView 中的输入元素时使用 Material Components,请遵循 启用 Material Components 说明 中所述的步骤。

GitHub

查看 Github