Flutter 桌面端独立窗口

本文介绍了在Flutter中模拟桌面独立窗口的三种方法。方法一利用路由背景透明,方法二借助OverLay和GestureDetector创建可拖动悬浮框,方法三通过win32多线程实现。提供了详细实现链接。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

目前Flutter还不支持在桌面端建立独立窗口,对应窗口跳转还是只能通过路由跳转来实现。虽然不能实现独立窗口,但是可以想办法实现相似的独立窗口效果。下面介绍两种方法,

方法一:

利用路由跳转时背景透明的方法,即想要实现独立窗口时仍然采用路由跳转的方式,但是可以选择将跳转后界面其他部分背景设为透明的方式实现独立窗口类似效果,如下图所示:

该方法跳转后只能操作中间的控件。

具体实现见本人另一篇文章:Flutter 路由跳转透明背景https://mp.youkuaiyun.com/mp_blog/creation/editor/118495110

方法二:

透过OverLay与GestureDetector结合的方式实现一个全局可拖曳的悬浮框,具体实现见

https://www.cxyzjd.com/article/weixin_43582313/111381528

方法三:

利用win32多线程实现独立窗口,通过channel在win32中创建一个新的界面线程,可以实现真正意义独立窗口,但是该方法只使用窗口元素较少的情况,毕竟win32绘制窗口较为麻烦。

### 使用 `desktop_multi_window` 插件实现在 Windows 平台上 Flutter 应用的多窗口功能 为了在 Windows 平台上实现 Flutter 应用程序的多窗口支持,推荐使用 `desktop_multi_window` 換件[^2]。此插件专为简化桌面应用程序中的多窗口管理而设计,并兼容 Windows、macOS 和 Linux。 #### 添加依赖项 首先,在项目的 `pubspec.yaml` 文件中添加 `desktop_multi_window` 作为依赖: ```yaml dependencies: flutter: sdk: flutter desktop_multi_window: ^0.1.0+1 ``` 接着运行命令来安装这些依赖: ```bash flutter pub get ``` #### 初始化并配置项目 确保已启用对桌面开发的支持。如果尚未完成这一步,则需通过以下方式激活: ```bash flutter config --enable-windows-desktop ``` #### 编写代码以创建新窗口 下面是一个简单的例子展示如何利用 `desktop_multi_window` 来打开一个新的子窗口并与之交互: ```dart import 'package:flutter/material.dart'; import 'package:desktop_multi_window/desktop_multi_window.dart'; void main() { WidgetsFlutterBinding.ensureInitialized(); DesktopMultiWindow.registerNewWindowCallback(openNewSubWindow); // 注册回调函数用于处理新开窗口请求 runApp(MyApp()); } Future<void> openNewSubWindow(int id) async { final windowController = await DesktopMultiWindow.open(id); windowController.setTitle('子窗口 ${id}'); windowController.build((controller) => SubWindow(controller)); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: '主窗口', home: Scaffold( appBar: AppBar(title: Text('主窗口')), body: Center(child: ElevatedButton(onPressed: () => _openAnotherWindow(), child: const Text('Open New Window'))), ), ); } Future<void> _openAnotherWindow() async { try { int newId = await DesktopMultiWindow.openNewWindow(); // 打开新的窗口实例 } catch (e) { debugPrint(e.toString()); } } } class SubWindow extends StatefulWidget { final WindowController controller; SubWindow(this.controller); @override State<SubWindow> createState() => _SubWindowState(); } class _SubWindowState extends State<SubWindow> { TextEditingController textEditingController = TextEditingController(); @override void initState() { super.initState(); widget.controller.setMessageHandler((message) { setState(() { textEditingController.text = message; }); }); } @override Widget build(BuildContext context) { return Material( child: Column( children: [ TextField(controller: textEditingController,), ElevatedButton( onPressed: (){ widget.controller.sendMessage(textEditingController.text.trim()); // 向父窗口发送消息 }, child: const Text('Send Message') ) ], ), ); } } ``` 这段代码展示了怎样设置一个按钮触发事件去启动另一个独立运作的新窗口;同时也包含了基本的消息传递机制以便于两个窗口间的信息交流。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值