【传奇开心果系列】基于Flet框架实现的用窗口管理器动态集中管理多窗口自定义组件模板特色和实现原理深度分析

基于Flet框架实现的用窗口管理器动态集中管理多窗口自定义组件模板特色和实现原理深度分析

一、效果展示GIF动图二、应用场景介绍1. **概括介绍**2.**具体说一说**
三、特色说明1. **集中管理**：2. **动态创建和管理子窗口**：3. **用户交互友好**：4. **自适应布局**：5. **代码结构清晰**：6. **日志输出**：
四、Flet 窗口管理器动态集中管理多窗口自定义模板实现原理深度解析1. 整体架构设计2. 子窗口管理机制2.1 子窗口状态管理2.2 动态添加/移除机制2.3 显示顺序管理
3. 引用(Ref)机制的使用4. 响应式UI更新5. 布局和样式设计6. 事件处理7. 窗口生命周期管理8. 代码中的关键设计模式9. 潜在改进点
五、总结六、源码下载地址

一、效果展示GIF动图

二、应用场景介绍

1. 概括介绍

是一个使用 Flet 框架开发的多窗口管理应用。该应用的主要功能是通过一个窗口管理器来集中管理和控制多个子窗口的显示、隐藏和关闭操作。

2.具体说一说

具体的应用场景包括但不限于：

多窗口应用程序：适用于需要同时管理多个子窗口的应用，例如数据分析工具、多媒体播放器、IDE（集成开发环境）等。仪表盘和控制面板：可以用于创建复杂的仪表盘或控制面板，每个子窗口可以显示不同的数据或控制不同的功能模块。多任务处理：适用于需要同时处理多个任务的场景，每个子窗口可以独立运行不同的任务。

三、特色说明

1. 集中管理：

通过
WindowManager 类集中管理所有子窗口，可以方便地进行显示、隐藏和关闭操作。子窗口的显示顺序可以通过
display_order 列表进行管理，确保用户界面的整洁和有序。

2. 动态创建和管理子窗口：

子窗口通过
ChildWindow 类动态创建，每个子窗口可以有自己的标题和内容。子窗口的显示和隐藏状态可以通过
visible 属性进行控制，并且可以在需要时动态添加或移除子窗口。

3. 用户交互友好：

提供了多个按钮来控制子窗口的显示、隐藏和关闭操作，用户可以通过点击按钮轻松管理子窗口。主窗口中有一个“关闭主窗口”按钮，可以方便地关闭整个应用程序。

4. 自适应布局：

使用
Column 和
Row 布局控件，确保子窗口和按钮在不同屏幕尺寸下都能自适应显示。子窗口的内容区域使用
Container 和
Column 组件，支持水平和垂直对齐，确保内容的美观和整齐。

5. 代码结构清晰：

代码分为
ChildWindow 和
WindowManager 两个类，职责分明，易于维护和扩展。使用
Ref 对象引用
Column 控件，方便在多个方法中访问和更新子窗口的显示顺序。

6. 日志输出：

在关键操作（如显示、隐藏、关闭子窗口）时输出日志，便于调试和跟踪程序运行状态。

四、Flet 窗口管理器动态集中管理多窗口自定义模板实现原理深度解析

这段代码使用 Flet 框架实现了一个窗口管理器系统，包含主窗口和多个可动态管理的子窗口。以下是其实现原理的深度解析：

1. 整体架构设计

代码采用了分层架构：

ChildWindow 类：表示单个子窗口，封装了窗口的UI和状态WindowManager 类：管理所有子窗口，处理窗口的显示、隐藏和排序main 函数：应用入口点，初始化页面和窗口管理器

2. 子窗口管理机制

2.1 子窗口状态管理

每个子窗口维护自己的可见性状态(
visible属性)，通过
show()和
hide()方法控制显示和隐藏。

2.2 动态添加/移除机制

初始时所有子窗口被创建但隐藏当调用
show()时，如果窗口不在页面中，会通过管理器重新添加
remove_child()方法可以从页面完全移除子窗口控件

2.3 显示顺序管理

使用
display_order列表跟踪窗口的显示顺序，确保后显示的窗口覆盖先显示的窗口：

# 在show_child方法中
if child_window in self.display_order:
    self.display_order.remove(child_window)
self.display_order.append(child_window)
self.update_display_order()

3. 引用(Ref)机制的使用

代码使用Flet的
Ref对象来动态访问和修改控件：

self.child_windows_column_ref = ft.Ref[ft.Column]()

这使得可以在任何地方通过引用访问和修改子窗口容器，而不需要直接传递控件实例。

4. 响应式UI更新

Flet框架的核心特性是响应式更新：

修改控件属性后调用
update()方法触发UI重绘所有状态变化都会反映到UI上

5. 布局和样式设计

使用
expand=True使容器自适应可用空间使用
border和
padding属性创建窗口视觉效果通过
Row和
Column控件组织按钮布局

6. 事件处理

按钮点击事件通过
on_click参数绑定到处理方法使用lambda函数传递特定子窗口参数：

ft.ElevatedButton(f"显示 {title}", 
                 on_click=lambda e, cw=child_window: cw.show())

7. 窗口生命周期管理

子窗口可以动态添加到页面或从页面移除主窗口可以通过
page.window_close()关闭所有窗口状态变化都有相应的日志输出

8. 代码中的关键设计模式

管理者模式：WindowManager统一管理所有子窗口观察者模式：子窗口状态变化通知管理器更新UI组合模式：使用Column和Row组合多个控件

9. 潜在改进点

使用更正式的状态管理方案（如BLoC模式）添加窗口最小化/最大化功能实现窗口拖拽功能添加窗口间通信机制

五、总结

该应用通过 Flet 框架实现了多窗口的集中管理，提供了丰富的用户交互功能和灵活的布局管理。无论是用于开发复杂的应用程序还是简单的仪表盘，都能满足多窗口管理和动态内容展示的需求。

这个实现展示了Flet框架的基本用法和控件管理策略，为构建更复杂的多窗口应用提供了基础架构。

六、源码下载地址

https://download.csdn.net/download/jackchuanqi/91939034