Flutter网页视图插件webview_pro_android的使用

webview_pro_android 是 flutter_webview_pro 插件的 Android 实现。它允许开发者在 Flutter 应用中嵌入高性能的 WebView 组件。

使用方法

此插件是被官方推荐的插件（endorsed federated plugin），因此你可以直接使用 flutter_webview_pro，而无需手动引入 webview_pro_android。当你使用 flutter_webview_pro 时，该插件会自动包含在你的项目中。

安装依赖

首先，在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  flutter_webview_pro: ^latest_version

然后运行以下命令以更新依赖项：

flutter pub get

初始化 WebView

以下是一个完整的示例代码，展示如何在 Flutter 中使用 webview_pro_android 插件加载网页。

示例代码

// Copyright 2013 The Flutter Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

// ignore_for_file: public_member_api_docs

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_webview_pro/flutter_webview_pro.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: WebViewExample(),
    );
  }
}

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

class _WebViewExampleState extends State<WebViewExample> {
  final Completer<WebViewController> _controller = Completer<WebViewController>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('WebView Pro Example'),
      ),
      body: WebviewScaffold(
        url: 'https://www.example.com', // 替换为目标网页的 URL
        withZoom: true, // 是否支持缩放
        withLocalStorage: true, // 是否启用本地存储
        hidden: false, // 是否隐藏 WebView
        initialChild: Center(child: CircularProgressIndicator()), // 加载前显示的占位符
        onProgress: (int progress) {
          print('WebView is loading (progress : $progress%)');
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () async {
          final WebViewController controller = await _controller.future;
          final String url = await controller.currentUrl();
          ScaffoldMessenger.of(context).showSnackBar(
            SnackBar(content: Text('Current URL: $url')),
          );
        },
        child: Icon(Icons.info),
      ),
    );
  }
}

代码说明

1. WebviewScaffold: 这是 flutter_webview_pro 提供的主要组件，用于嵌入 WebView。

   • url: 指定要加载的网页地址。
   • withZoom: 是否支持页面缩放。
   • withLocalStorage: 是否启用本地存储功能。
   • hidden: 是否隐藏 WebView。
   • initialChild: 在 WebView 加载完成之前显示的占位符。
   • onProgress: 监听 WebView 的加载进度。

2. FloatingActionButton: 点击按钮后，获取当前 WebView 的 URL 并显示在 SnackBar 中。

运行效果

运行上述代码后，应用将加载指定的网页，并在屏幕底部显示一个按钮。点击按钮后，会弹出一个 SnackBar 显示当前加载的网页地址。

贡献指南

如果想为该插件贡献代码或修复问题，请参考以下步骤：

1. 通信层生成: 该插件使用 pigeon 工具生成 Flutter 和宿主平台之间的通信层。通信接口定义在 pigeons/android_webview.dart 文件中。修改接口后，可以通过运行以下脚本重新生成通信层：

   ./generatePigeons.sh

2. 测试工具: 该插件还使用 mockito 来生成测试所需的 Mock 对象。生成 Mock 对象的命令如下：

   flutter packages pub run build_runner build --delete-conflicting-outputs