Flutter window和Mac中webview2使用Cef替代

眼镜会飞2025-04-11 11:03

目前主流是使用 webview2，并且以实例的方式启动，无法作为widget组件在Flutter应用中内嵌，只能以新窗口的形式打开，体验不是很友好也不太符合大多数软件开发的需求要求。

这里使用CEF（Chromium Embedded Framework）来替代webview2的方案，CEF是基于 Chrome Chromium 的一个开源内核，Google官方并未提供flutter版本的CEF，需要自己使用C++编写cpp去实现接口能力或者使用第三方作者封装的依赖库。

目前接入有2种方式

C++编写原生cpp + Flutter Plugin的形式接入

接入相对复杂、原生配置和编写3端的代码量非常大（Windows端 C++；Mac端 Objective-C或swift；Flutter）

使用pub仓库中的一个大佬封装的CEF库（点击 webview_cef 查阅），这个方式较为便捷也满足大多数要求

本文仅分享webview_cef的使用案例不讨论C++形式。这个库已经实现了大部分常用接口能力，当然您C++能力过硬并且比较闲，也可以自己编写 C++ cpp的方式接入CEF。

接入案例

1、在 pubspec.yaml 中引入webview_cef

2、在windows\runner\main.cpp中初始化 initCEFProcesses()

3、 ::MSG msg; 中加入 handleWndProcForCEF()启用 CEF 键盘输入推送

4、flutter run 即可，首次编译会下载 cef资源包，文件较大，会比较慢，等待即可

嵌入示例运行效果