Flutter笔记:桌面端应用多窗口管理方案

news2025/1/16 20:06:51
Flutter笔记
桌面端应用多窗口管理方案

作者李俊才 (jcLee95):https://blog.csdn.net/qq_28550263
邮箱 :291148484@163.com
本文地址:https://blog.csdn.net/qq_28550263/article/details/134468587


【简介】:文本主要介绍 Flutter 桌面应用开发中多窗口管理。 指导开发者能够更轻松地构建具有多窗口功能的桌面应用程序,介绍一种简单的方式来创建和管理多个窗口,支持在 Windows、macOS 和 Linux 上构建原生桌面应用程序。使得开发者可以轻松地创建新窗口,控制窗口的大小、位置、最小化、最大化、全屏、关闭等操作,以及在不同窗口之间共享数据。
不同于单窗口,多串口中可以创建管理多个窗口,例如下main这个场景:

  • 应用启动时,打开一个窗口作为主窗口;
  • 主窗口上一个创建子窗口,并且可以以 广播 或者 指定子窗口 ID 两种形式发送消息;
  • 子串口可以有多个,不论主窗口还是众多子窗口,都以 ID 作为其通信的标识;
  • 应用栏失活和激活时显示为两种颜色、两种文字予以区分;>在这里插入图片描述
    另请参见 《桌面应用窗口定制库 bitsdojo_window》,地址:https://blog.csdn.net/qq_28550263/article/details/134464678

这里仅仅基本实现了多窗口功能。关于更进一步的讲解和复杂需求的示例将在我 将于明年(2014)出版的《flutter应用开发——从基础到项目实战》一书中进行介绍,届时将发布出版信息,敬请关注。


1. 概述

1.1 多窗口管理简介

desktop_multi_window 它提供了一种简单的方式来创建和管理多个窗口。这个库的主要目标是使开发者能够更轻松地构建具有多窗口功能的桌面应用程序。这个库支持在 WindowsmacOSLinux 上构建原生桌面应用程序。它提供了一系列的 API,使得开发者可以轻松地创建新窗口,控制窗口的大小位置最小化最大化全屏关闭。此外,它还提供了在不同窗口之间共享数据(窗口通信)的功能。

使用 desktop_multi_window,开发者可以专注于应用程序的核心功能,而不需要花费大量的时间和精力在窗口管理上。这使得 Flutter 桌面应用开发变得更加简单和高效。

1.2 窗口生命状态简介

在使用 desktop_multi_window 库时,还有一个配套使用的库是 desktop_lifecycle。在桌面应用中,一个窗口在任何时候都可能被用户激活或非激活。例如,当用户点击一个窗口或者使用 Alt+Tab 切换到一个窗口时,该窗口就会被激活;当用户点击其他窗口或者使用 Alt+Tab 切换到其他窗口时,该窗口就会被非激活。这些状态变化对于桌面应用的用户体验非常重要,因此需要被正确地处理。

2. 库的安装和配置

2.1 添加多窗口依赖

要在 Flutter 项目中使用 desktop_multi_window,首先需要在项目的 pubspec.yaml 文件中添加 desktop_multi_window 作为依赖并保存。具体步骤如下:

  1. 打开 pubspec.yaml 文件。
  2. dependencies 部分添加 desktop_multi_window 的依赖,如下所示:
dependencies:
  flutter:
    sdk: flutter

  desktop_multi_window: ^0.2.0
  1. 保存 pubspec.yaml 文件。
  2. 在终端中运行 flutter pub get 命令,以获取 desktop_multi_window 的依赖包。

2.2 配置窗口状态依赖

要在 Flutter 项目中使用 desktop_lifecycle,首先需要在项目的 pubspec.yaml 文件中添加 desktop_lifecycle 的依赖。具体步骤如下:

  1. 打开 pubspec.yaml 文件,在 dependencies 部分添加 desktop_lifecycle 的依赖并保存。如下所示:
dependencies:
  flutter:
    sdk: flutter

  desktop_lifecycle: ^0.1.1
  1. 在终端中运行 flutter pub get 命令,以获取 desktop_lifecycle 的依赖包。

2.3 初始化窗口管理

在添加了 desktop_multi_window 的依赖之后,你可以在项目中使用 desktop_multi_window。以下是初始化的步骤:

  1. 在项目的 main.dart 文件中导入 desktop_multi_window 库,如下所示:
// mian函数中对窗口初始化模式进行控制
if (args.firstOrNull == 'multi_window') {
  runApp(const SubWindow());
}else{
  runApp(const MainWindow());
}
  1. 在你的 Flutter 代码中,你可以使用 WindowController 类来控制窗口。例如,你可以使用 WindowController.fromWindowId(windowId) 来获取一个窗口的控制器,然后使用这个控制器来控制窗口的大小、位置、标题等属性。

至此,desktop_multi_window 的安装和设置就完成了。接下来,你就可以使用 desktop_multi_window 来创建和管理你的 Flutter 桌面应用程序的多个窗口了。

3. 创建和管理窗口

3.1 创建新窗口

在 desktop_multi_window 中,新窗口的创建是通过 DesktopMultiWindow.createWindow 方法实现的。这个方法接收一个 JSON 字符串作为参数,该字符串包含了新窗口的一些初始设置。例如:

final window = await DesktopMultiWindow.createWindow(jsonEncode({
  'args1': 'Sub window',
  'args2': 100,
  'args3': true,
  'business': 'business_test',
}));

3.2 管理窗口属性

你可以使用 WindowController 类来管理窗口的属性,如大小、位置、标题等。例如,你可以使用以下代码来设置窗口的大小和位置:

window
  ..setFrame(const Offset(0, 0) & const Size(1280, 720))
  ..center()
  ..setTitle('Another window')
  ..show();

在上述代码中,setFrame 方法用于设置窗口的大小和位置,center 方法用于将窗口居中,setTitle 方法用于设置窗口的标题,show 方法用于显示窗口。

3.3 窗口的最小化、最大化、全屏和关闭操作

你可以使用 WindowController 类来进行窗口的最小化、最大化、全屏和关闭操作。例如,你可以使用以下代码来最小化窗口:

window.minimize();

你可以使用以下代码来最大化窗口:

window.maximize();

你可以使用以下代码来全屏窗口:

window.fullScreen();

你可以使用以下代码来关闭窗口:

window.close();

4. 窗口活动状态管理

4.1 监听窗口激活状态

desktop_lifecycle 提供了 DesktopLifecycle 类,你可以通过 DesktopLifecycle.instance.isActive 来获取当前窗口的激活状态。例如:

bool isActive = DesktopLifecycle.instance.isActive.value;

你也可以添加监听器来监听窗口的激活状态变化。例如:

DesktopLifecycle.instance.isActive.addListener(() {
  bool isActive = DesktopLifecycle.instance.isActive.value;
  // 在这里处理窗口的激活状态变化
});

4.2 处理窗口激活和非激活状态

当窗口的激活状态发生变化时,你可以在监听器中进行相应的处理。例如,你可以在窗口被激活时执行一些操作,而在窗口被非激活时执行一些其他的操作。以下是一个示例:

DesktopLifecycle.instance.isActive.addListener(() {
  bool isActive = DesktopLifecycle.instance.isActive.value;
  if (isActive) {
    // 窗口被激活,执行一些操作
  } else {
    // 窗口被非激活,执行一些其他的操作
  }
});

5. 在不同窗口之间共享数据

desktop_multi_window 提供了一种在不同窗口之间共享数据的机制。你可以使用 DesktopMultiWindow.invokeMethod 方法来向指定的窗口发送数据,然后在那个窗口中使用 DesktopMultiWindow.setMethodHandler 方法来接收和处理这些数据。以下是一个示例,展示了如何向指定的窗口发送数据:

final windowId = 1; // 窗口的 ID
final data = 'Hello, world!'; // 要发送的数据
DesktopMultiWindow.invokeMethod(windowId, 'onSend', data);

在上述代码中,invokeMethod 方法的第一个参数是窗口的 ID,第二个参数是方法名,第三个参数是要发送的数据。

然后,你可以在接收数据的窗口中使用 setMethodHandler 方法来接收和处理这些数据:

DesktopMultiWindow.setMethodHandler((MethodCall call, int fromWindowId) async {
  if (call.method == 'onSend') {
    final data = call.arguments; // 接收到的数据
    // 在这里处理数据
  }
});

在上述代码中,setMethodHandler 方法接收一个回调函数,这个函数有两个参数:一个是 MethodCall 对象,包含了方法名和参数;另一个是发送数据的窗口的 ID。你可以在这个回调函数中根据方法名来判断数据的类型,然后进行相应的处理。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1225283.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

python算法例10 整数转换为罗马数字

1. 问题描述 给定一个整数,将其转换为罗马数字,要求返回结果的取值范围为1~3999。 2. 问题示例 4→Ⅳ,12→Ⅻ,21→XⅪ,99→XCIX。 3. 代码实现 def int_to_roman(num):val [1000, 900, 500, 400,100, 90, 50, 40…

vue项目中使用vant轮播图组件(桌面端)

一. 内容简介 vue使用vant轮播图组件(桌面端) 二. 软件环境 2.1 Visual Studio Code 1.75.0 2.2 chrome浏览器 2.3 node v18.14.0 三.主要流程 3.1 安装环境 3.2 添加代码 3.3 结果展示 四.具体步骤 4.1 安装环境 先安装包 # Vue 3 项目,安装最新版 Va…

Linux进程——exec族函数、exec族函数与fork函数的配合

exec族函数解析 作用 我们用fork函数创建新进程后,经常会在新进程中调用exec函数去执行另外一个程序。当进程调用exec函数时,该进程被完全替换为新程序。因为调用exec函数并不创建新进程,所以前后进程的ID并没有改变。 功能 在调用进程内部…

【Web】Ctfshow SSRF刷题记录1

核心代码解读 <?php $url$_POST[url]; $chcurl_init($url); curl_setopt($ch, CURLOPT_HEADER, 0); curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); $resultcurl_exec($ch); curl_close($ch); ?> curl_init()&#xff1a;初始curl会话 curl_setopt()&#xff1a;会…

QCheckBox样式表

1、QCheckBox选择器和指示器类型 选择器类型描述QCheckBoxQCheckBox 的默认选择器。QCheckBox::indicatorQCheckBox 的指示器,即复选框的标记部分。QCheckBox::indicator:checkedQCheckBox 选中状态下的指示器。QCheckBox::indicator:uncheckedQCheckBox 未选中状态下的指示器…

神辅助 Cursor 编辑器,加入 GPT-4 让编码更轻松!

分类 互联网 在 ChatGPT 问世之前&#xff0c;我们的编码方式很多时候都是面向搜索引擎编码&#xff0c;需要不断地进行搜索&#xff0c;然后复制粘贴&#xff0c;俗称复制粘贴工程师。 但是&#xff0c;随着ChatGPT的出现&#xff0c;这一切将彻底改变。 ChatGPT 是一种基于…

【漏洞复现】通达oa 前台sql注入

漏洞描述 通达OA(Office Automation)是一款企业级协同办公软件,旨在为企业提供高效、便捷、安全、可控的办公环境。它涵盖了企业日常办公所需的各项功能,包括人事管理、财务管理、采购管理、销售管理、库存管理、生产管理、办公自动化等。通达OA支持PC端和移动端使用,可以…

操作系统(五)| 文件系统上 结构 存取方式 文件目录 检索

文章目录 1 文件系统概述2 文件的结构与存取方式2.1 磁盘2.2 文件的物理结构2.2.1 连续结构2.2.2 链式结构2.2.3 索引结构 2.3 文件的存取方式 3 文件目录3.1 基本概念3.2 目录结构单级目录结构多级目录结构 3.3 文件目录检索3.3.1 目录检索文件寻址 3.4 文件目录的实现 1 文件…

CAS源码工程搭建记录

CAS源码工程搭建 1.下载2.gradle下载源改为阿里云&#xff0c;解决下载慢的问题3.解决保存 1.下载 git clone -b 5.3.x https://gitee.com/mirrors/CAS.git如果下载的是压缩包&#xff0c;导入工程会保存&#xff0c;因为builder.gradle的第20行开始有取git信息&#xff0c;如…

为关键信息基础设施安全助力!持安科技加入关保联盟

近日&#xff0c;中关村华安关键信息基础设施安全保护联盟发布了其新一批的会员单位&#xff0c;零信任办公安全代表企业持安科技成功加入&#xff0c;与联盟企业共同为关键信息基础设施提供各类支撑和保障。 中关村华安关键信息基础设施安全保护联盟由北京市科学技术委员会、中…

数据结构初阶leetcodeOJ题(二)

目录 第一题 思路&#xff1a; 第二题 思路 第三题 描述 示例1 思路 总结&#xff1a;这种类似的题&#xff0c;都是用快慢指针&#xff0c;相差一定的距离然后输出慢指针。 第一题 给你一个链表的头节点 head 和一个整数 val &#xff0c;请你删除链表中所有满足 Node.val…

【vue实战项目】通用管理系统:首页

前言 本文为博主的vue实战小项目系列中的第三篇&#xff0c;很适合后端或者才入门的小伙伴看&#xff0c;一个前端项目从0到1的保姆级教学。前面的内容&#xff1a; 【vue实战项目】通用管理系统&#xff1a;登录页-CSDN博客 【vue实战项目】通用管理系统&#xff1a;封装to…

为什么软件公司很少用Python开发Web项目?

实际上&#xff0c;Python在Web开发方面有着广泛的应用&#xff0c;许多软件公司也确实使用Python来开发Web项目。 Python拥有诸如Django、Flask等流行的Web框架&#xff0c;这些框架使得开发者能够迅速、高效地开发出Web应用。 然而&#xff0c;Python在Web开发中的使用可能会…

C_12练习题

一、单项选择题(本大题共20小题,每小题2分&#xff0c;共40分。在每小题给出的四个备选项中&#xff0c;选出一个正确的答案&#xff0c;并将所选项前的字母填写在答题纸的相应位置上。) C 风格的注释&#xff0c;也称块注释或多行注释&#xff0c;以&#xff08;&#xff09;…

基于STM32的多组外部中断(EXTI)的优化策略与应用

在某些嵌入式应用中&#xff0c;可能需要同时处理多个外部中断事件。STM32系列微控制器提供了多组外部中断线&#xff08;EXTI Line&#xff09;&#xff0c;可以同时配置和使用多个GPIO引脚作为外部中断触发器。为了有效管理和处理多组外部中断&#xff0c;我们可以采取一些优…

[CISCN 2023 初赛]ezbyte

从字符串找到%100s&#xff0c;发现下面有个yes 跟踪yes 、 yes之前有个jmp 看上面的代码&#xff0c;要想跳转到含有yes这一块&#xff0c;需要r13等于r12 xor r13&#xff0c;r13说明r13是0&#xff0c;但是找不到r12的操作代码 实际着这个关键的操作r12的加密逻辑&…

STM32外部中断(EXTI)与RTOS多任务处理的协同设计

当在STM32上使用外部中断&#xff08;EXTI&#xff09;与RTOS&#xff08;Real-Time Operating System&#xff0c;实时操作系统&#xff09;进行多任务处理时&#xff0c;需要设计合适的协同机制&#xff0c;以确保可靠的中断处理和任务调度。在下面的概述中&#xff0c;我将介…

微机原理_12

一、单项选择题(本大题共15小题,每小题3分&#xff0c;共45分。在每小题给出的四个备选项中&#xff0c;选出一个正确的答案。〕 十进制正数56的 8位二进制补码是()。 A. 00011001 B. 10100110 C. 10011001 D. 00100110 若栈顶的物理地址为20100H&#xff0c;当执行完指令PUSH…

Day34力扣打卡

打卡记录 合并石头的最低成本&#xff08;区间DP&#xff09; 链接 与多边形的三角形问题相同&#xff0c;将大问题化小问题&#xff0c;再用中间节点不断地寻找最值。 class Solution:def mergeStones(self, stones: List[int], k: int) -> int:n len(stones)if (n - 1…