左滑看详情，长按进多选：一次聊天气泡交互回炉

StoreX Flutter IM 交互 多选 重构
January 11, 2026
1 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.

给聊天气泡的交互做了回炉：左滑去看详情，长按菜单里才进多选；顺手把之前误删的多选功能救回来。

我想解决什么

  • 左滑原本直接进多选，体验有点怪，我更想左滑就弹出消息详情。
  • 划选文本（isSelectable）这套老逻辑没人用，还占坑。
  • 更坑的是，之前一次任务误删了多选功能，得把它拉回。

动了哪些代码

  • animations.dart：SwipeToSelectMessage → SwipeToEditMessage，回调改成 onSwipeEdit，图标换成信息圆圈，阈值变量也改名。
  • message_bubbles.dart：删掉 isSelectable 相关属性与 UI，不再有划选模式。
  • message_detail_sheet.dart：补了缺失的 _formatDateTime，避免编译报错。
  • chat_page.dart：
    • 清掉多余的 import。
    • 恢复多选状态与逻辑：_isMultiSelectMode、_selectedMessageIds，长按菜单里的“多选”入口，选择/退出/删除/状态 AppBar，全都加回。

现在的交互流程

  • 左滑：弹出详情弹窗。
  • 长按：弹出菜单，可选择“多选”。
  • 多选模式：点击切换选中，AppBar 显示已选数量，删除按钮批量删除，返回/X 退出多选。

小结

这次主要是把概念拆清楚：划选文本已经下线；多选消息要保留，而且入口只在长按。教训也记上：改删除类任务前，先 grep 看看目标还在不在，别自己挖坑。***