UI 一致性优化与组件复用重构

2.1 问题分析

项目中有统一的 Toast 组件 app_toast.dart，提供 showAppToast() 函数，样式为：

• 底部弹出的水平条形 Toast
• 深色背景 + 琥珀色文字
• 支持多个 Toast 堆叠显示

但某些地方错误使用了 Flutter 原生的 ScaffoldMessenger.showSnackBar，样式为：

• 居中的胶囊形状
• 深色背景 + 白色文字
• 与整体风格不协调

2.2 问题定位

通过 grep 搜索定位使用 ScaffoldMessenger.showSnackBar 的位置：

grep -r "ScaffoldMessenger.*showSnackBar" --include="*.dart"

找到 2 处：

1. home_page.dart L129-130 - 笔记保存成功提示
2. message_detail_sheet.dart L397-398 - 消息保存失败提示

2.3 解决方案

将所有 ScaffoldMessenger.showSnackBar 替换为 showAppToast：

home_page.dart:

// Before
ScaffoldMessenger.of(context).showSnackBar(
  const SnackBar(content: Text('笔记已保存')),
);
 
// After
showAppToast(context, '笔记已保存');

message_detail_sheet.dart:

// Before
ScaffoldMessenger.of(context).showSnackBar(
  SnackBar(content: Text('保存失败: $e')),
);
 
// After
showAppToast(context, '保存失败: $e');

2.4 关键教训

当时记录的原话: “问题不是 app_toast.dart 啊，这个文件我们从来没改过，因为它本来就提供的对的样式，而是你之后写的东西不对啊”

教训：

• 问题定位要准确，不要急于修改”看起来相关”的文件
• 项目已有统一组件时，问题往往在于没有使用而非组件本身
• 全局搜索是定位此类问题的有效手段

3.1 问题分析

我这边用的时候发现：“你刚才优化UI比例只优化了文件列表界面，我需要的是全局，全局懂吗”

之前只优化了：

• file_tiles.dart - 文件列表项
• app_bar_widgets.dart - 搜索栏
• home_page.dart - 底部导航栏

遗漏了：

• 会话列表项 (session_widgets.dart)
• 桌面端会话项 (send_page.dart)
• 传输列表项 (transfers_page.dart)
• 聊天输入框 (chat_input.dart)

3.2 优化清单

3.3 设计原则

1. 紧凑化: 减少不必要的留白，提高信息密度
2. 统一性: 所有列表项遵循相似的比例关系
3. 层次感: 主要内容突出，次要信息弱化
4. 现代化: 更小的圆角、更紧凑的布局符合现代 UI 趋势

4.1 问题分析

原有的笔记小部件布局 (widget_note.xml) 包含：

• 标题栏（图标 + 标题 + 保存按钮）
• 预览区域（可点击输入的文本区）

这种设计的问题：

1. 功能错位: 桌面小部件应该是”快速入口”，不是”迷你应用”
2. 交互复杂: 使用时需要理解”点击输入”→“点击保存”的流程
3. 空间浪费: 大量空间用于显示空白预览区
4. 不一致: 与”快速上传”小部件的简洁按钮形式不统一

4.2 解决方案

将笔记小部件改为与上传小部件相同的按钮形式：

Before (widget_note.xml):

<LinearLayout orientation="vertical">
    <!-- 标题栏 -->
    <LinearLayout orientation="horizontal">
        <ImageView /> <!-- 图标 -->
        <TextView /> <!-- 标题 -->
        <ImageButton /> <!-- 保存按钮 -->
    </LinearLayout>
    
    <!-- 预览区域 -->
    <TextView hint="点击输入笔记..." />
</LinearLayout>

After:

<LinearLayout 
    orientation="horizontal"
    gravity="center">
    
    <ImageView
        layout_width="32dp"
        layout_height="32dp"
        src="@android:drawable/ic_menu_edit" />
    
    <TextView
        layout_marginStart="8dp"
        text="笔记"
        textSize="16sp"
        textStyle="bold" />
</LinearLayout>

4.3 设计理念

小部件的职责是触发动作，不是承载功能

点击小部件 → 打开 App → 进入笔记编辑界面

这种设计：

• 保持小部件轻量
• 统一两个小部件的交互模式
• 学习成本低

5.1 问题分析

项目中已有完善的文件夹选择器 FilePickerDialog：

• 支持路径导航和面包屑
• 支持新建文件夹
• 统一的 UI 风格

但设置页面自己实现了一个 _PathPickerSheet：

• 约 300+ 行重复代码
• 缺少新建文件夹功能
• 需要单独维护

5.2 我这边用的时候发现

“拉起的文件夹选择器又是你自己实现的，你没看到我们文件移动的时候已经有一个文件夹选择器了吗？还能新建文件夹，你为什么还要用一个不一样的？？？“

5.3 解决方案

// Before - 使用自定义的 _PathPickerSheet
Future<String?> _showPathPickerDialog({...}) async {
  return showModalBottomSheet<String>(
    context: context,
    isScrollControlled: true,
    backgroundColor: Colors.transparent,
    builder: (ctx) => _PathPickerSheet(
      title: title,
      currentPath: currentPath,
      showAskOnUpload: showAskOnUpload,
      askOnUploadValue: _askOnUpload,
    ),
  );
}
 
// After - 复用 FilePickerDialog
Future<String?> _showPathPickerDialog({...}) async {
  return FilePickerDialog.pickFolder(
    context,
    title: title,
    showAskOnUpload: showAskOnUpload,
    askOnUploadValue: _askOnUpload,
  );
}

class _AskOnUploadItem extends StatelessWidget {
  final VoidCallback onTap;
 
  const _AskOnUploadItem({required this.onTap});
 
  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    return ListTile(
      leading: Container(
        width: 40,
        height: 40,
        decoration: BoxDecoration(
          color: theme.colorScheme.primaryContainer.withValues(alpha: 0.5),
          borderRadius: BorderRadius.circular(8),
        ),
        child: Icon(
          TablerIcons.hand_click,
          color: theme.colorScheme.primary,
          size: 24,
        ),
      ),
      title: Text('上传时选择', ...),
      subtitle: Text('每次上传时让我选择目录', ...),
      onTap: onTap,
    );
  }
}

Expanded(
  child: ListView(
    children: [
      // 上传时选择选项（仅在根目录且启用时显示）
      if (widget.showAskOnUpload && _currentPath == '/')
        _AskOnUploadItem(
          onTap: () => Navigator.pop(context, widget.askOnUploadValue),
        ),
      // 文件/文件夹列表
      ...files.map((file) => _FilePickerItem(...)),
      // 空状态
      if (files.isEmpty && !(widget.showAskOnUpload && _currentPath == '/'))
        _buildEmptyState(),
    ],
  ),
),

5.4 收益

7.1 为什么不修改 app_toast.dart?

背景: 最初误以为 Toast 样式问题在于 app_toast.dart 本身。

决策:

• app_toast.dart 的实现是正确的
• 问题在于其他地方没有使用它
• 应该修复调用方，而非修改被调用方

教训:

“这个文件我们从来没改过，因为它本来就提供的对的样式”

7.2 为什么笔记小部件要简化?

选项对比:

决策: 选择 B

理由:

1. 小部件的核心价值是”快速入口”，不是”迷你应用”
2. 与上传小部件保持一致的交互模式
3. 桌面空间有限，按钮形式更省空间

7.3 为什么要复用 FilePickerDialog?

选项对比:

决策: 选择 B

理由:

1. FilePickerDialog 已经很完善，支持新建文件夹
2. 只需添加”上传时选择”选项即可满足设置页需求
3. 减少 300+ 行重复代码