Flutter WebView交互插件flutter_webview_platform_interface的使用

Flutter WebView交互插件flutter_inappwebview_platform_interface的使用

A common platform interface for the flutter_webview 插件。

该接口允许平台特定实现的 flutter_webview 插件及其本身确保它们支持相同的接口。

使用

要实现一个新的平台特定的 flutter_webview 实现，可以扩展 InAppWebViewPlatform 类，并在其中实现平台特定的行为。当你注册插件时，通过调用 InAppWebViewPlatform.instance = MyPlatformWebview() 来设置默认的 InAppWebViewPlatform。

示例代码

import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  InAppWebViewController? webViewController;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter WebView 示例'),
        ),
        body: InAppWebView(
          initialUrlRequest: URLRequest(url: Uri.parse("https://www.example.com")),
          onWebViewCreated: (controller) {
            webViewController = controller;
          },
        ),
      ),
    );
  }
}

注意事项

强烈建议进行非破坏性更改（例如向接口添加方法），而不是破坏性更改。

有关为什么一个不太干净的接口比破坏性更改更可取的讨论，请参阅 https://flutter.dev/go/platform-interface-breaking-changes。


更多关于Flutter WebView交互插件flutter_webview_platform_interface的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter WebView交互插件flutter_webview_platform_interface的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


flutter_webview_platform_interface 是 Flutter 中用于 WebView 交互的一个平台接口包。它提供了一个统一的接口，允许开发者与不同平台上的 WebView 进行交互。这个包通常与其他 WebView 插件（如 webview_flutter）一起使用，以实现跨平台的 WebView 功能。

使用步骤

  1. 添加依赖： 首先，你需要在 pubspec.yaml 文件中添加 flutter_webview_platform_interface 的依赖。

    dependencies:
  flutter:
    sdk: flutter
  flutter_webview_platform_interface: ^2.0.0

  2. 导入包： 在 Dart 文件中导入 flutter_webview_platform_interface 包。

    import 'package:flutter_webview_platform_interface/flutter_webview_platform_interface.dart';

  3. 创建 WebView 控制器： 你可以使用 WebViewPlatform 来创建和管理 WebView 控制器。通常，你会使用 WebViewPlatform.instance 来获取当前平台的 WebView 实现。

    final WebViewPlatform webViewPlatform = WebViewPlatform.instance;

  4. 初始化 WebView： 你可以使用 webViewPlatform.create 方法来初始化 WebView。这个方法通常会返回一个 WebViewPlatformController，你可以用它来控制 WebView 的行为。

    final WebViewPlatformController controller = webViewPlatform.create(
  onWebViewCreated: (WebViewPlatformController controller) {
    // WebView 创建成功后的回调
  },
  onPageStarted: (String url) {
    // 页面开始加载时的回调
  },
  onPageFinished: (String url) {
    // 页面加载完成后的回调
  },
  onProgress: (int progress) {
    // 页面加载进度更新时的回调
  },
  onNavigationRequest: (NavigationRequest request) {
    // 处理导航请求
    return NavigationDecision.navigate;
  },
);

  5. 加载 URL： 使用 controller.loadUrl 方法来加载指定的 URL。

    controller.loadUrl('https://flutter.dev');

  6. 执行 JavaScript： 你可以使用 controller.evaluateJavascript 方法来执行 JavaScript 代码。

    controller.evaluateJavascript('alert("Hello, World!");');

  7. 处理导航： 通过 onNavigationRequest 回调，你可以处理 WebView 中的导航请求，并决定是否允许导航。

    onNavigationRequest: (NavigationRequest request) {
  if (request.url.contains('blocked-site.com')) {
    return NavigationDecision.prevent;
  }
  return NavigationDecision.navigate;
},

  8. 销毁 WebView： 当你不再需要 WebView 时，可以调用 controller.dispose 方法来释放资源。

    controller.dispose();

示例代码

以下是一个简单的示例，展示了如何使用 flutter_webview_platform_interface 来加载一个网页并执行 JavaScript。

import 'package:flutter/material.dart';
import 'package:flutter_webview_platform_interface/flutter_webview_platform_interface.dart';

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

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

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

class _WebViewExampleState extends State<WebViewExample> {
  late WebViewPlatformController _controller;

  [@override](/user/override)
  void initState() {
    super.initState();
    final WebViewPlatform webViewPlatform = WebViewPlatform.instance;
    _controller = webViewPlatform.create(
      onWebViewCreated: (WebViewPlatformController controller) {
        // WebView 创建成功后的回调
        print('WebView created');
      },
      onPageStarted: (String url) {
        // 页面开始加载时的回调
        print('Page started loading: $url');
      },
      onPageFinished: (String url) {
        // 页面加载完成后的回调
        print('Page finished loading: $url');
      },
      onProgress: (int progress) {
        // 页面加载进度更新时的回调
        print('Loading progress: $progress%');
      },
      onNavigationRequest: (NavigationRequest request) {
        // 处理导航请求
        print('Navigation request: ${request.url}');
        return NavigationDecision.navigate;
      },
    );

    // 加载 URL
    _controller.loadUrl('https://flutter.dev');
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('WebView Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 执行 JavaScript
            _controller.evaluateJavascript('alert("Hello, World!");');
          },
          child: Text('Run JavaScript'),
        ),
      ),
    );
  }

  [@override](/user/override)
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}
回到顶部