顶部工具栏UI现代化

StoreX UI 桌面 上传 重构
January 4, 2026
2 min read
By devshan

Table of Contents

This is a list of all the sections in this post. Click on any of them to jump to that section.

1. 背景

在桌面端文件管理界面中，我这边用的时候发现顶部工具栏的上传和新建按钮使用悬停菜单不够直观。原有的悬停菜单设计在桌面端体验不佳，使用上需要将鼠标悬停一段时间才能看到菜单，操作效率较低。

2. 需求

  • 修改顶部上传按钮，点击时不再显示悬停菜单，而是直接弹出居中对话框
  • 修改顶部新建按钮，点击时不再显示悬停菜单，而是直接弹出居中对话框
  • 保持移动端功能一致，但适配各自平台的交互习惯

3. 实现方案

3.1 上传按钮行为调整

  • 移除原有的 MenuAnchor 和悬停逻辑
  • 使用 TextButton.icon 替代原来的 MenuAnchor 组件
  • 点击时使用 showDialog 显示居中弹窗
  • 弹窗包含选择文件和选择文件夹选项

3.2 新建按钮行为调整

  • 移除原有的 MenuAnchor 和悬停逻辑
  • 使用 TextButton.icon 替代原来的 MenuAnchor 组件
  • 点击时使用 showDialog 显示居中弹窗
  • 弹窗包含新建文件夹和新建文本选项

3.3 UI 设计

  • 保持按钮的视觉样式一致
  • 使用 AlertDialog 显示选项列表
  • 使用 ListTile 组件显示各个功能选项
  • 保持暗色和亮色主题的适配

4. 技术实现

4.1 组件重构

  • 修改 _ToolbarUploadButtonState 类，移除 MenuController、_buttonHovered、_menuHovered 等状态变量
  • 修改 _ToolbarNewButtonState 类，移除 MenuController、_buttonHovered、_menuHovered 等状态变量
  • 使用 TextButton.icon 和 showDialog 实现点击弹窗功能

4.2 样式适配

  • 保持原有的按钮样式和颜色
  • 添加适当的内边距以优化按钮间距
  • 适配暗色和亮色主题的颜色

5. 使用体验改进

  • 点击即可打开功能选择，无需悬停等待
  • 居中弹窗更加直观，可以快速识别选项
  • 减少了误触可能性，提升了操作效率
  • 保持了与移动端类似的交互模式

6. 验证

  • 运行 flutter analyze 确保代码无错误
  • 测试上传按钮点击弹窗功能正常
  • 测试新建按钮点击弹窗功能正常
  • 验证暗色/亮色主题适配正常
  • 确认移动端功能不受影响