Flutter WebView插件flutter_adeeinappwebview_android的使用

flutter_inappwebview 是一个功能强大的 Flutter 插件，用于在应用中嵌入 WebView。它支持 Android 和 iOS 平台，并提供了丰富的功能，如 JavaScript 交互、自定义 URL 处理、cookie 管理等。以下是如何使用 flutter_inappwebview 插件的基本步骤。

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  flutter_inappwebview: ^5.3.2 # 请使用最新版本

然后，运行 flutter pub get 来安装依赖。

2. 基本使用

在 Flutter 项目中使用 flutter_inappwebview 的基本步骤如下：

import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.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> {
  InAppWebViewController? webViewController;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('WebView Example'),
      ),
      body: InAppWebView(
        initialUrlRequest: URLRequest(url: Uri.parse("https://www.example.com")),
        onWebViewCreated: (InAppWebViewController controller) {
          webViewController = controller;
        },
        onLoadStart: (InAppWebViewController controller, Uri? url) {
          print("Page started loading: $url");
        },
        onLoadStop: (InAppWebViewController controller, Uri? url) {
          print("Page finished loading: $url");
        },
        onProgressChanged: (InAppWebViewController controller, int progress) {
          print("Loading progress: $progress%");
        },
      ),
    );
  }
}

3. 常用功能

3.1 JavaScript 交互

你可以在 WebView 中执行 JavaScript 代码，并处理来自 JavaScript 的回调。

webViewController?.evaluateJavascript(source: "alert('Hello, World!');");

3.2 处理 URL 变化

你可以监听 URL 的变化，并根据需要进行处理。

InAppWebView(
  initialUrlRequest: URLRequest(url: Uri.parse("https://www.example.com")),
  onLoadStart: (InAppWebViewController controller, Uri? url) {
    if (url.toString().contains("example.com")) {
      // 处理特定的 URL
    }
  },
)

3.3 Cookie 管理

你可以使用 CookieManager 来管理 WebView 中的 cookie。

final cookieManager = CookieManager.instance();

// 设置 cookie
cookieManager.setCookie(
  url: Uri.parse("https://www.example.com"),
  name: "my_cookie",
  value: "my_value",
);

// 获取 cookie
cookieManager.getCookies(url: Uri.parse("https://www.example.com")).then((cookies) {
  print(cookies);
});

3.4 自定义 WebView 设置

你可以通过 InAppWebViewSettings 来配置 WebView 的行为。

InAppWebView(
  initialUrlRequest: URLRequest(url: Uri.parse("https://www.example.com")),
  initialSettings: InAppWebViewSettings(
    javaScriptEnabled: true,
    useHybridComposition: true,
    mediaPlaybackRequiresUserGesture: false,
  ),
)

4. 处理权限请求

在某些情况下，WebView 可能需要请求权限（如访问摄像头、麦克风等）。你可以通过 onPermissionRequest 来处理这些请求。

InAppWebView(
  initialUrlRequest: URLRequest(url: Uri.parse("https://www.example.com")),
  onPermissionRequest: (InAppWebViewController controller, PermissionRequest request) async {
    // 处理权限请求
    request.grant();
  },
)

5. 处理下载请求

你可以通过 onDownloadStart 来处理 WebView 中的下载请求。

InAppWebView(
  initialUrlRequest: URLRequest(url: Uri.parse("https://www.example.com")),
  onDownloadStart: (InAppWebViewController controller, Uri url) async {
    // 处理下载请求
    print("Download started: $url");
  },
)

6. 处理错误

你可以通过 onLoadError 来处理页面加载错误。

InAppWebView(
  initialUrlRequest: URLRequest(url: Uri.parse("https://www.example.com")),
  onLoadError: (InAppWebViewController controller, Uri? url, int code, String message) {
    print("Error loading URL: $message");
  },
)

7. 生命周期管理

你可以通过 onPause 和 onResume 来管理 WebView 的生命周期。

InAppWebView(
  initialUrlRequest: URLRequest(url: Uri.parse("https://www.example.com")),
  onPause: (InAppWebViewController controller) {
    print("WebView paused");
  },
  onResume: (InAppWebViewController controller) {
    print("WebView resumed");
  },
)