You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

如何在Windows和macOS平台体验Flutter多窗口功能?

如何在Windows和macOS平台体验Flutter多窗口功能?

嗨,我刚好跟进过这个多窗口功能的开发进度,给你梳理下现在能上手尝试的具体步骤,亲测在Win和Mac上都能跑通:

一、先切换到支持多窗口的Flutter环境

这个功能刚合并到引擎不久,还没推送到稳定版分支,所以得先切换到最新的开发分支:

  • 打开终端,执行 flutter channel master 切换到master分支
  • 接着执行 flutter upgrade 拉取最新的代码,确保拿到包含多窗口功能的引擎版本

二、编写多窗口测试代码

不需要额外装插件,直接用dart:ui里的原生API就能创建新窗口,给你个简单的示例:

  1. 打开你的Flutter项目的main.dart,先导入dart:ui包:
import 'dart:ui';
  1. 在你的主页面里加一个按钮,点击触发创建新窗口,比如在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分支的模板已经默认配置了,但老项目可能需要手动加相关配置,新创建的项目一般不用管)

火山引擎 最新活动