Flutter macOS WebView插件 flutter_macos_webview 的使用

flutter_macos_webview 是一个用于在 macOS 平台上显示原生 WebView 的 Flutter 插件。通过这个插件，你可以在 macOS 应用中嵌入网页内容。

安装

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

dependencies:
  flutter_macos_webview: ^0.1.0

然后运行 flutter pub get 来安装插件。

示例代码

以下是一个完整的示例，展示了如何使用 flutter_macos_webview 插件来打开一个 WebView，并设置不同的展示样式（modal 或 sheet）。

完整的示例 Demo

import 'package:flutter/cupertino.dart';
import 'package:flutter_macos_webview/flutter_macos_webview.dart';

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

class App extends StatelessWidget {
  // 定义 WebView 打开按钮的回调函数
  Future<void> _onOpenPressed(PresentationStyle presentationStyle) async {
    final webview = FlutterMacOSWebView(
      onOpen: () => print('Opened'), // WebView 打开时的回调
      onClose: () => print('Closed'), // WebView 关闭时的回调
      onPageStarted: (url) => print('Page started: $url'), // 页面开始加载时的回调
      onPageFinished: (url) => print('Page finished: $url'), // 页面加载完成时的回调
      onWebResourceError: (err) {
        // 网页资源加载错误时的回调
        print(
          'Error: ${err.errorCode}, ${err.errorType}, ${err.domain}, ${err.description}',
        );
      },
    );

    // 打开 WebView
    await webview.open(
      url: 'https://google.com', // 要加载的 URL
      presentationStyle: presentationStyle, // 展示样式
      size: Size(400.0, 400.0), // WebView 的大小
      userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 14_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0 Mobile/15E148 Safari/604.1', // 自定义 User-Agent
    );

    // 可选：延迟几秒后关闭 WebView
    // await Future.delayed(Duration(seconds: 5));
    // await webview.close();
  }

  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      debugShowCheckedModeBanner: false,
      home: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          // 按钮：以 modal 方式打开 WebView
          CupertinoButton(
            child: Text('Open as modal'),
            onPressed: () => _onOpenPressed(PresentationStyle.modal),
          ),
          SizedBox(height: 16.0),
          // 按钮：以 sheet 方式打开 WebView
          CupertinoButton(
            child: Text('Open as sheet'),
            onPressed: () => _onOpenPressed(PresentationStyle.sheet),
          ),
        ],
      ),
    );
  }
}

解释

1. 导入插件：

   import 'package:flutter_macos_webview/flutter_macos_webview.dart';
   

2. 创建 WebView 实例：

   • 使用 FlutterMacOSWebView 创建一个新的 WebView 实例。
   • 提供回调函数来处理 WebView 的生命周期事件，例如打开、关闭、页面加载开始和结束等。

3. 打开 WebView：

   • 使用 webview.open() 方法来打开 WebView。
   • 参数包括要加载的 URL、展示样式（modal 或 sheet）、WebView 的大小以及自定义的 User-Agent。

4. 展示样式：

   • PresentationStyle.modal：以模态窗口的形式展示 WebView。
   • PresentationStyle.sheet：以底部弹出表单的方式展示 WebView。

5. 关闭 WebView：

   • 你可以通过调用 webview.close() 方法来手动关闭 WebView。

总结

通过 flutter_macos_webview 插件，你可以轻松地在 macOS 应用中集成 WebView 功能。该插件提供了灵活的配置选项，允许你根据需求定制 WebView 的行为和外观。