Android使用flutter WebView插件渲染画面

Posted 小陈乱敲代码

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Android使用flutter WebView插件渲染画面相关的知识,希望对你有一定的参考价值。

前言

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

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

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

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

什么是Flutter WebView?

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

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

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

要求

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

Flutter

这是一个Flutter SDK,用于运行和编译Flutter项目。

  • Windows
  • macOS
  • Linux
  • Chrome OS

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

VS代码

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

安卓工作室

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

  • 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 。让我们看看下面的内容。

注意,下面的参数和它们的描述。

  • 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

注意,javascriptModeautoMediaPlaybackPolicy 参数不能为空。

创建小组件页面

现在,我们将在我们的应用程序中创建两个widget页面:HomePageWebViewPageHomePage 页面将容纳两个按钮。每个按钮被点击后将打开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 是一个有状态的部件,而WebPageStateWebViewPage 的逻辑和内部状态。

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

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

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

运行应用程序

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

flutter run 

如果你使用的是VS Code,右键点击lib/main.dart ,然后点击Run Without DebuggingStart Debugging

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

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

主页

点击进入Open pub.dev



点击Open Medium.com



总结

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

首先,我们开始介绍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应用程序中渲染和显示网页。

最后

对于很多初中级Android工程师而言,想要提升技能,往往是自己摸索成长。而不成体系的学习效果低效漫长且无助。时间久了,付出巨大的时间成本和努力,没有看到应有的效果,会气馁是再正常不过的。

所以学习一定要找到最适合自己的方式,有一个思路方法,不然不止浪费时间,更可能把未来发展都一起耽误了。

如果你是卡在缺少学习资源的瓶颈上,那么刚刚好我能帮到你。以上知识笔记全部免费分享,**如有需要获取知识笔记的朋友,可以点击下方二维码费领取。

以上是关于Android使用flutter WebView插件渲染画面的主要内容,如果未能解决你的问题,请参考以下文章

Android使用flutter WebView插件渲染画面

Flutter web app中注入Android对象的Android webview调用方法

Android在 Flutter 中使用 WebView

如何使用 flutter_webview_plugin 播放视频

Flutter WebView加载本地html的问题

Flutter webview_flutter:无法使用 java 脚本代码检测平台