【传奇开心果系列】Flet框架实现的浮动按钮展开隐藏按钮组自定义组件特色和实现原理深度解析

一、效果展示GIF动图

二、使用场景初步介绍

1. 移动应用

• 社交媒体应用: 用户可以通过点击 FAB 快速发布内容、评论或分享。
• 任务管理应用: 用户可以快速创建新任务、编辑现有任务或删除任务。
• 笔记应用: 用户可以快速创建新笔记、搜索笔记或设置提醒。

2. 桌面应用

• 文件管理器: 用户可以快速创建新文件夹、删除文件、搜索文件或设置文件属性。
• 图像编辑软件: 用户可以快速添加图层、删除图层、搜索图层或调整图层设置。

3. Web 应用

• 在线购物网站: 用户可以快速将商品加入购物车、搜索商品或查看订单信息。
• 博客平台: 用户可以快速发布新文章、编辑文章或删除文章。

三、特色说明

1. 动态显示/隐藏:

• 当用户点击主 FAB 按钮时，子按钮会动态显示或隐藏，提供了一种简洁的方式来管理多个操作。

2. 布局灵活:

• 子按钮通过 Column 容器进行排列，并且每个按钮都有一定的间距和边距，使得整体布局更加美观。

3. 右对齐设计:

• 页面的水平对齐方式设置为右对齐 (page.horizontal_alignment = ft.CrossAxisAlignment.END)，使得 FAB 和子按钮更符合某些应用的设计需求。

4. 可配置的样式:

• FAB 和子按钮的颜色、图标、提示文字等都可以根据需要进行配置，提供了较高的定制化程度。

5. 响应式更新:

• 通过 page.update() 方法，确保每次按钮状态改变后，页面能够立即反映出最新的变化，保证用户体验的流畅性。

6. 自动滚动:

• 页面设置了 auto_scroll = True 和 scroll = ft.ScrollMode.HIDDEN，使得页面在内容超出视口时可以自动滚动，但滚动条不会显示，保持界面的整洁。

7. 顶部导航栏:

• 页面顶部有一个导航栏 (AppBar)，包含标题和一个菜单按钮，增强了应用的导航功能。

四、概括介绍

这个自定义的 FAB 组件不仅提供了丰富的功能，还具有高度的可定制性和灵活性，适用于多种应用场景，能够显著提升用户交互体验。无论是移动应用、桌面应用还是 Web 应用，都可以通过这个组件来增强用户的操作便利性和界面美观度。

五、Flet自定义浮动操作按钮实现原理分析

这段代码实现了一个自定义的浮动操作按钮（Floating Action Button, FAB）界面，点击主FAB按钮会展开一组次级操作按钮。下面是对实现原理的详细分析：

（一）核心实现机制

1. 页面布局配置

page.horizontal_alignment = ft.CrossAxisAlignment.END  # 修改为右对齐
page.auto_scroll = True
page.scroll = ft.ScrollMode.HIDDEN

• 设置页面内容右对齐，使浮动按钮位于右侧
• 启用自动滚动和隐藏滚动条，提供更好的用户体验

2. 应用栏设置

page.appbar = ft.AppBar(
    title=ft.Text("CustomFloat