如何在Windows和macOS平台体验Flutter多窗口功能?
如何在Windows和macOS平台体验Flutter多窗口功能?
嗨,我刚好跟进过这个多窗口功能的开发进度,给你梳理下现在能上手尝试的具体步骤,亲测在Win和Mac上都能跑通:
一、先切换到支持多窗口的Flutter环境
这个功能刚合并到引擎不久,还没推送到稳定版分支,所以得先切换到最新的开发分支:
- 打开终端,执行
flutter channel master切换到master分支 - 接着执行
flutter upgrade拉取最新的代码,确保拿到包含多窗口功能的引擎版本
二、编写多窗口测试代码
不需要额外装插件,直接用dart:ui里的原生API就能创建新窗口,给你个简单的示例:
- 打开你的Flutter项目的
main.dart,先导入dart:ui包:
import 'dart:ui';
- 在你的主页面里加一个按钮,点击触发创建新窗口,比如在StatefulWidget的build方法里:
ElevatedButton( onPressed: () async { // 创建新窗口实例 final newWindow = await PlatformDispatcher.instance.createWindow(); // 配置新窗口的基础属性 newWindow.title = "我的第二个Flutter窗口"; // 设置窗口物理尺寸(注意这里是物理像素,会自动适配设备像素比) newWindow.physicalSize = const Size(800, 600); // 给新窗口绑定要显示的Widget newWindow.rootWidget = MaterialApp( theme: ThemeData(primarySwatch: Colors.blue), home: Scaffold( appBar: AppBar(title: const Text("新窗口测试")), body: const Center( child: Text("这是通过Flutter多窗口API创建的新窗口!"), ), ), ); // 显示新窗口 newWindow.show(); }, child: const Text("打开新窗口"), )
三、运行项目并测试
- 执行
flutter run -d windows或者flutter run -d macos启动对应平台的项目 - 点击页面上的按钮,就能看到新窗口弹出来了,两个窗口都是Flutter渲染的,完全独立运行
一些注意事项
- 这个功能目前是实验性的,API可能还会在后续版本里调整,比如窗口的位置控制、关闭事件监听这些细节还在完善
- 如果遇到窗口显示异常、API调用报错的情况,可以去Flutter官方的issue系统反馈问题,开发团队一直在跟进修复
- Mac平台上如果遇到窗口无法正常弹出的情况,检查下项目的
Info.plist里是否开启了多窗口支持(现在master分支的模板已经默认配置了,但老项目可能需要手动加相关配置,新创建的项目一般不用管)




