Flet框架平面级联菜单侧边栏和和登录用户圆形头像自定义组件模板
一、效果展示GIF动图
二、应用场景介绍
这个Flet应用程序展示了一个带有平面级联菜单的侧边栏和登录用户的圆形头像。它适用于需要用户登录并提供导航菜单的应用程序，例如：
- 管理后台：管理员可以查看不同模块（如用户管理、通知设置、系统设置等）。
- 个人中心：用户可以在个人中心查看自己的信息，并通过侧边栏访问不同的功能模块。
- 仪表盘：用于监控和管理各种数据指标，侧边栏可以帮助用户快速切换到不同的视图。
三、特色说明
-
圆形头像与在线状态
- 使用
ft.CircleAvatar创建了圆形用户头像，并通过ft.Stack将一个小型绿色圆圈放置在头像的右下角，表示用户的在线状态。 - 头像大小为60x60像素，半径为30像素，确保头像显示清晰且美观。
- 使用
-
平面级联菜单
- 侧边栏包含多个
ft.ExpansionTile组件，每个组件代表一个主菜单项，并可以展开显示子菜单项。 - 每个
ft.ExpansionTile都有一个图标和标题，展开后会显示多个ft.ListTile子项，每个子项也带有图标和文本描述。 - 支持默认折叠或展开状态的设置，用户可以通过点击标题来展开或收起子菜单。
- 侧边栏包含多个
-
样式与对齐
- 使用
ft.Container和ft.Column来组织布局，确保所有元素整齐排列。 - 通过
ft.alignment.center_left和ft.MainAxisAlignment.START等属性，确保内容居中对齐并从顶部开始排列。
- 使用
-
交互性
- 用户可以点击头像查看更多信息或进行操作。
- 用户可以通过点击主菜单项来展开或收起子菜单，方便快捷地访问不同功能模块。
-
颜色与图标
- 使用了多种颜色和图标来区分不同的菜单项，增强了视觉效果和用户体验。
- 图标颜色统一为蓝色，突出显示重要信息，如在线状态使用绿色背景的小圆圈。
四、总结
该模板提供了一个简洁而功能丰富的侧边栏设计，结合了用户头像和在线状态显示，以及多级菜单的交互体验。它不仅美观大方，而且易于扩展和自定义，适合各类需要用户登录和导航的应用场景。