Flutter如何在Mac桌面端嵌入WebView

在Flutter开发Mac桌面端应用时，如何正确嵌入WebView控件？目前尝试使用webview_flutter插件，但发现它主要支持移动端，在MacOS上无法正常运行。是否有其他可靠的插件或原生方案可以实现这个功能？需要支持基本的网页加载、JS交互和导航控制。最好能提供具体的代码示例和配置步骤。

2 回复

在Flutter桌面端嵌入WebView，推荐使用webview_flutter插件。首先添加依赖到pubspec.yaml，然后在代码中引入并使用WebView组件。注意配置macOS权限，在macos/Runner/DebugProfile.entitlements和Release.entitlements中添加网络权限。

更多关于Flutter如何在Mac桌面端嵌入WebView的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在 Flutter 的 Mac 桌面端嵌入 WebView，推荐使用官方维护的 webview_flutter 插件（从 4.0 版本开始支持桌面平台）。以下是具体步骤和代码示例：

步骤 1：添加依赖

在 pubspec.yaml 中添加依赖：

dependencies:
  webview_flutter: ^4.4.2  # 使用最新稳定版

步骤 2：配置 macOS 权限

在 macos/Runner/DebugProfile.entitlements 和 macos/Runner/Release.entitlements 文件中添加网络权限：

<key>com.apple.security.network.client</key>
<true/>

步骤 3：实现 WebView

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

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

  @override
  State<WebViewExample> createState() => _WebViewExampleState();
}

class _WebViewExampleState extends State<WebViewExample> {
  late final WebViewController controller;

  @override
  void initState() {
    super.initState();
    controller = WebViewController()
      ..loadRequest(Uri.parse('https://flutter.dev'))
      ..setJavaScriptMode(JavaScriptMode.unrestricted);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Flutter WebView Example')),
      body: WebViewWidget(controller: controller),
    );
  }
}

关键说明：

  1. 初始化控制器：通过 WebViewController 配置加载的网址和 JavaScript 模式
  2. 权限配置：必须添加网络客户端权限，否则无法加载网页
  3. 桌面端支持：该插件通过 Platform View 在 macOS 上原生嵌入 WebKit 视图

注意事项：

  • 目前仅支持 macOS 10.11+ 系统
  • 首次加载可能需要处理权限弹窗
  • 可通过 WebViewController 实现前进/后退/重载等控制

这种方式在 macOS 上能获得接近原生 WebView 的性能和体验。

回到顶部