Flutter macOS WebView集成插件macos_webview_kit的使用

[0.0.3]

简介

• Flutter与macOS系统的WebView插件兼容，可以像在iOS系统中使用WKWebView一样平滑。在Flutter macOS项目中，WebView的打开（传递URL）和关闭是通过channel实现的。

配置 entitlements 文件

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<key>com.apple.security.app-sandbox</key>
	<true/>
	<key>com.apple.security.cs.allow-jit</key>
	<true/>
	<key>com.apple.security.network.server</key>
	<true/>
	<key>com.apple.security.network.client</key>
    <true/>
</dict>
</plist>

导入

import 'package:macos_webview_kit/macos_webview_kit.dart';

使用

打开

MacosWebviewKit().openWebView(urlString: "https://www.sohu.com");

关闭

MacosWebviewKit().closeWebView();

显示

MacosWebviewKit().showWebView();

隐藏

MacosWebviewKit().hideWebView();

效果

完整示例

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

import 'package:flutter/services.dart';
import 'package:macos_webview_kit/macos_webview_kit.dart';

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

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String _platformVersion = 'Unknown';
  final _macosWebviewKitPlugin = MacosWebviewKit();

  [@override](/user/override)
  void initState() {
    super.initState();
    initPlatformState();
  }

  // 平台消息是异步的，所以我们初始化在一个异步方法中。
  Future<void> initPlatformState() async {
    String platformVersion;
    // 平台消息可能会失败，所以我们使用try/catch PlatformException。
    // 我们还处理消息可能返回null的情况。
    try {
      platformVersion = await _macosWebviewKitPlugin.getPlatformVersion() ?? 'Unknown platform version';
    } on PlatformException {
      platformVersion = 'Failed to get platform version.';
    }

    // 如果小部件从树中被移除，而异步平台消息还在飞行中，我们想丢弃回复而不是调用setState来更新我们的不存在的外观。
    if (!mounted) return;

    setState(() {
      _platformVersion = platformVersion;
    });
  }

  Future<void> openWebView1() async {
    await _macosWebviewKitPlugin.openWebView(urlString: "https://www.sohu.com");
  }

  Future<void> openWebView2() async {
    await _macosWebviewKitPlugin.openWebView(urlString: "https://www.baidu.com");
  }

  Future<void> closeWebView() async {
    await _macosWebviewKitPlugin.closeWebView();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('插件示例应用'),
        ),
        body: Center(
          child: Column(
            children: [
              Text('运行在: $_platformVersion\n'),
              const SizedBox(height: 10,),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  ElevatedButton(onPressed: () => openWebView1(), child: const Text("打开webView1")),
                  ElevatedButton(onPressed: () => openWebView2(), child: const Text("打开webView2")),
                  ElevatedButton(onPressed: () => closeWebView(), child: const Text("关闭webView")),
                ],
              )
            ],
          ),
        ),
      ),
    );
  }
}