Flutter WebView Pro 插件使用指南

flutter_webview_pro 是一个强大的 Flutter 插件，它提供了 WebView 组件，并且支持文件上传、相机拍照以及地理位置等功能。本文将详细介绍如何在 Flutter 项目中集成和使用 flutter_webview_pro。

1. 安装插件

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

dependencies:
  # 如果你使用的 Flutter 版本 >=2.5 并且 <2.8
  flutter_webview_pro: ^3.0.1+4
  
  # 如果你使用的 Flutter 版本 >=2.8
  flutter_webview_pro:
    git:
      url: https://github.com/wenzhiming/flutter-plugins.git
      ref: dev-3.0.4
      path: packages/webview_flutter/webview_flutter

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

flutter pub get

2. 导入插件

在需要使用 WebView 的 Dart 文件中导入插件：

import 'package:flutter_webview_pro/webview_flutter.dart';

3. 使用 WebView

接下来，我们可以通过创建一个 WebView 组件来展示网页内容。以下是一个简单的示例代码：

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter WebView Example')),
        body: WebViewExample(),
      ),
    );
  }
}

class WebViewExample extends StatefulWidget {
  [@override](/user/override)
  _WebViewExampleState createState() => _WebViewExampleState();
}

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

  [@override](/user/override)
  void initState() {
    super.initState();
    if (Platform.isAndroid) WebView.platform = SurfaceAndroidWebView();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return WebView(
      initialUrl: 'https://www.example.com',
      javascriptMode: JavascriptMode.unrestricted,
      onWebViewCreated: (WebViewController webViewController) {
        _controller.complete(webViewController);
      },
      onProgress: (int progress) {
        print("WebView is loading (progress : $progress%)");
      },
      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,
      geolocationEnabled: true, // 是否启用地理位置功能
    );
  }
}

示例说明：

• initialUrl: 设置 WebView 初始加载的 URL。
• javascriptMode: 设置 JavaScript 模式为 unrestricted，允许执行 JavaScript。
• onWebViewCreated: 当 WebView 创建完成后回调，可以获取到 WebViewController 实例。
• navigationDelegate: 控制页面跳转行为，例如阻止跳转到某些特定的 URL。
• onPageStarted 和 onPageFinished: 页面加载开始和结束时的回调函数。
• geolocationEnabled: 是否启用地理位置功能。

Android 平台视图设置

该插件使用 Platform Views 来嵌入 Android 的 WebView 组件。有两种模式可以选择：Hybrid Composition 和 Virtual Display。

使用 Hybrid Composition

这是当前默认的模式，适用于 Android SDK 19 及以上版本。你需要确保在 android/app/build.gradle 文件中设置了正确的 minSdkVersion：

android {
    defaultConfig {
        minSdkVersion 19
    }
}

使用 Virtual Display

如果你选择使用 Virtual Display 模式，则需要设置 minSdkVersion 至少为 20，并在 initState() 方法中配置 WebView：

import 'dart:io';

import 'package:flutter_webview_pro/webview_flutter.dart';

class WebViewExample extends StatefulWidget {
  [@override](/user/override)
  WebViewExampleState createState() => WebViewExampleState();
}

class WebViewExampleState extends State<WebViewExample> {
  [@override](/user/override)
  void initState() {
    super.initState();
    if (Platform.isAndroid) WebView.platform = AndroidWebView();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return WebView(
      initialUrl: 'https://flutter.dev',
    );
  }
}