likes
comments
collection
share

如何使用Flutter WebView插件渲染网页（详细介绍）

作者站长头像
站长
· 阅读数 38

谷歌创建Flutter是为了简化我们创建应用程序的方式，使我们的应用程序能够在不同的平台上运行，而不需要移植代码或重写我们已有的应用程序。

要做到这一点并不容易，因为每个原生操作系统都有其独特之处，而且数量众多。谷歌不可能支持所有的系统。所以，谷歌让Flutter变得可配置，其方式是插件可以由其他开发者开发。

现在，我们有一个常见的小部件是WebView小部件。这个WebView小组件允许我们加载网页。

当我们需要时，如何在Flutter中使用这个同样的部件？flutter.dev为我们解决了这个问题。他们为此开发了一个Flutter插件：它就是webview_flutter 。

什么是Flutter WebView？

webview_flutter 是一个Flutter插件，它在Android和iOS上提供了一个WebView小部件。这个插件是用来在Android和iOS设备上显示网页的。

在这篇文章中，我们将学习如何在Flutter项目中使用webview_flutter 。

我们将学习如何使用webview_flutter 插件从其URL或本地源加载网页。

要求

我们将建立一个Flutter项目，所以我们需要在我们的机器上已经安装了一些工具。

Flutter

这是一个Flutter SDK，用于运行和编译Flutter项目。请到Flutter的文档中根据您的操作系统选择Flutter SDK。

这些链接包含如何在您的机器上安装Flutter SDK的说明。安装完成后，确保flutter 在您的全局路径中。运行flutter --help ，测试Flutter SDK是否在您的机器上安装并被全局访问。

VS代码

VS Code是微软为我们带来的一个强大的现代代码编辑器。它有一个扩展，可以帮助您在VS Code中轻松地使用Flutter。在您的VS Code中安装Flutter的扩展。

安卓工作室

如果您想在 Android 中运行和测试您的应用程序，那么您需要在您的机器上安装 Android Studio。然后，我们需要安装 Flutter 和 Dart 插件。

确保一切都已安装并运行。在下一节，我们将设置一个Flutter项目。

设置您的Flutter项目

现在，我们将创建一个Flutter项目。我们将使用flutter CLI工具来完成这项工作。 我们的Flutter项目的名称将是webviewprj 。运行下面的命令。

flutter create webviewprj

Flutter将在文件夹webviewprj 中创建一个项目，然后安装依赖性。 在VS Code中打开这个项目。如果你不使用VS Code，你可以在终端完成一切，但你必须在你喜欢的代码编辑器中打开这个项目。

cd webviewprj

如果你使用的是VS Code，就不需要做上面的工作。只要在顶部菜单中的 "查看"，点击 "终端"，就可以打开VS Code的集成终端。

添加webview_flutter 依赖性

接下来，我们将添加webview_flutter 依赖关系到我们的项目。

在你的项目根目录下打开pubspec.yaml 文件，并添加以下几行。

dependencies:
  flutter:
    sdk: flutter
  webview_flutter:

保存pubspec.yaml 文件将导致VS Code安装该依赖关系。如果您没有使用VS Code，在您的终端运行以下命令来安装webview_flutter 依赖关系。

flutter pub get webview_flutter

flutter pub 包含管理Flutter软件包的命令。

flutter pub get 在Flutter项目中获取包。在本例中，它在我们的Flutter项目中获取webview_flutter 包。

接下来，我们设置webview_flutter 插件所需的最小SDK版本。在你的项目中打开android/app/build.gradle ，并在android → defaultConfig 部分添加以下配置代码。

android {
    defaultConfig {
        minSdkVersion 19
    }
}

webview_flutter 从Android v19向上到最新的Android版本都可以使用。

使用webview_flutter

webview_flutter 输出一个WebView 类。这个类启动并创建一个新的Web视图，并在WebView小部件内渲染设定的网页（通过其URL）。WebView可以使用一个WebViewController ，一旦WebView被创建，它就被传递给onWebViewCreated 回调。 为了渲染WebView widget，我们需要导入webview_flutter 包。

import 'package:webview_flutter/webview_flutter.dart';

然后，我们像这样渲染WebView widget。

WebView(
    initialUrl: 'https://medium.com'
);

这将加载页面 [https://medium.com](https://medium.com)并在WebView widget中渲染。WebView 小组件将呈现 [https://medium.com](https://medium.com)就像浏览器会渲染页面一样。WebView 传递给initialUrl 的参数告诉WebView 要加载和渲染的网页的URL。 还有其他参数，我们可以传递给WebView 。让我们看看下面的内容。

注意，下面的参数和它们的描述是从WebView类库文档中摘录的。

  • onWebViewCreated: 这是一个函数，一旦网络视图被创建就会被调用。
  • initialUrl: 这是一个字符串，用来保存网页的URL，以便在WebView上加载和呈现。
  • javascriptMode: 这是设置WebView中是否启用了JavaScript。
  • javascriptChannels: 在WebView中运行的JavaScript代码可用的JavascriptChannels 。
  • navigationDelegate: 一个决定如何处理导航动作的委托函数
  • onPageStarted ：当一个页面开始加载时被调用。
  • onPageFinished ：当页面加载完毕后被调用。
  • onProgress ：当一个页面正在加载时被调用。
  • debuggingEnabled: 控制是否启用WebView的调试。默认情况下，它被设置为false
  • gestureNavigationEnabled: 一个布尔值，表示水平滑动手势是否会触发后退式列表导航。默认情况下，它被设置为false
  • allowsInlineMediaPlayback: 控制iOS上是否允许HTML5视频的内联播放。这个字段在Android上被忽略，因为Android默认允许。它的默认值是false

注意，javascriptMode 和autoMediaPlaybackPolicy 参数不能为空。

创建小组件页面

现在，我们将在我们的应用程序中创建两个widget页面：HomePage 和WebViewPage 。HomePage 页面将容纳两个按钮。每个按钮被点击后将打开WebViewPage 页面。这个WebViewPage 页面将渲染一个WebView ，将网页的URL传递给WebView widget。

让我们来创建它们。已经，Flutter为我们生成了一些代码。除了MyApp widget，我们将取消其他widget。 打开lib/main.dart 文件，编辑成以下代码。

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'dart:io';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage()
    );
  }
}

请看，我们在MyApp widget中渲染HomePage 。这使得HomePage 在应用程序被打开时呈现。

让我们对HomePage widget进行编码。

class HomePage extends StatelessWidget {
  void _handleURLButtonPress(BuildContext context, String url, String title) {
    Navigator.push(context,
        MaterialPageRoute(builder: (context) => WebViewPage(url, title)));
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("WebView Flutter Example"),
      ),
      body: Center(
          child: Column(
        children: [
          MaterialButton(
            color: Colors.blue,
            child: Text(
              "Open pub.dev",
              style: TextStyle(color: Colors.white70, fontWeight: FontWeight.bold),
            ),
            onPressed: () {
              _handleURLButtonPress(
                  context, "https://pub.dev", "pub.dev");
            },
          ),
          MaterialButton(
            color: Colors.blue,
            child: Text(
              "Open Medium.com",
              style: TextStyle(color: Colors.white70, fontWeight: FontWeight.bold),
            ),
            onPressed: () {
              _handleURLButtonPress(
                  context, "https://medium.com", "Medium.com");
            },
          ),
        ],
      )),
    );
  }
}

看，这个HomePage 渲染了两个按钮MaterialButton 。每个按钮都被设置为在点击时调用函数_handleURLButtonPress 。

第一个按钮，Open pub.dev ，调用_handleURLButtonPress ，通过context ，"https://pub.dev" ，和"pub.dev" 。"https://pub.dev" 是由WebView 加载和渲染的网页的URL。"pub.dev" 将是AppBar 的标题WebViewPage 。

第二个按钮，Open Medium.com ，将调用函数_handleURLButtonPress ，参数context 。 [https://medium.com.com](https://medium.com.com)(WebView widget将加载和渲染的网页URL), 和Medium.com (WebViewPage 页面的标题)。

函数_handleURLButtonPress 启动了WebViewPage widget页面。它将把网页的URL和标题传递给WebViewPage 。

让我们对WebViewPage widget进行编码。

class WebViewPage extends StatefulWidget {
  final String url;
  final String title;

  WebViewPage(this.url, this.title);

  @override
  WebViewPageState createState() =>
      WebViewPageState(this.url, this.title);
}

class WebViewPageState extends State<WebViewPage> {
  final String url;
  final String title;

  WebViewPageState(this.url, this.title);

  @override
  void initState() {
    super.initState();
    // Enable hybrid composition.
    if (Platform.isAndroid) WebView.platform = SurfaceAndroidWebView();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(this.title),
        ),
        body: Column(children: [
          Expanded(
              child: WebView(
                  initialUrl: this.url,
                  javascriptMode: JavascriptMode.unrestricted
              )
          )
        ])
    );
  }
}

WebViewPage 是一个有状态的部件，而WebPageState 是WebViewPage 的逻辑和内部状态。

WebViewPage 构造函数接受url 和title 。它在createState 方法中把它传递给WebViewPageState 。

当WebViewPageState 渲染WebView ，它将initialUrl 传递给WebView ，并将this.url 作为其值。

JavaScript模式javascriptMode 被设置为JavascriptMode.unrestricted 。这种JavaScript模式使网页可以运行JavaScript。

运行应用程序

现在，我们已经完成了编码工作。我们将运行该应用程序。要做到这一点，在终端运行以下命令。

flutter run

如果你使用的是VS Code，右键点击lib/main.dart ，然后点击Run Without Debugging 或Start Debugging 。

注意，请确保你的模拟器正在运行。

这将在你的手机模拟器上编译应用程序并运行它。

主页

如何使用Flutter WebView插件渲染网页（详细介绍）

点击进入Open pub.dev

如何使用Flutter WebView插件渲染网页（详细介绍）

如何使用Flutter WebView插件渲染网页（详细介绍）

如何使用Flutter WebView插件渲染网页（详细介绍）

点击Open Medium.com

如何使用Flutter WebView插件渲染网页（详细介绍）

如何使用Flutter WebView插件渲染网页（详细介绍） 如何使用Flutter WebView插件渲染网页（详细介绍）

总结

在本教程中我们学到了很多东西。

首先，我们开始介绍WebView ，以及如何将其移植到Flutter。接下来，我们介绍了webview_flutter ，还学习了如何设置Flutter项目和安装webview_flutter 的依赖性。后来，我们建立了小部件来渲染和显示网页 [https://blog.logrocket.com](https://blog.logrocket.com)和 [https://logrocket.com](https://logrocket.com)在一个来自webview_flutter 插件的WebView widget上。

有了这个webview_flutter 插件，我们将能够在我们的Flutter应用程序中渲染和显示网页。

请看GitHub中的源代码。

参考资料

The postRender webpages using the Flutter WebView pluginappeared first onLogRocket Blog.