修复Dismissible类拖动问题：实现列表项部分拖动后固定

Dismissible的核心设计目标是让列表项被滑动移除，所以直接用它实现"部分拖动固定"确实不太合适，这里给你两个可行的自定义实现思路：

思路1：用GestureDetector + AnimatedContainer自定义拖动效果 #

这是最直观且易控制的方案，通过监听拖动手势来控制列表项的横向偏移，达到拖动到指定位置后固定的效果：

代码示例 #

class PartiallyDraggableListItem extends StatefulWidget {
  final String content;
  const PartiallyDraggableListItem({super.key, required this.content});

  @override
  State<PartiallyDraggableListItem> createState() => _PartiallyDraggableListItemState();
}

class _PartiallyDraggableListItemState extends State<PartiallyDraggableListItem> {
  double _dragOffset = 0.0;
  final double _maxFixedOffset = 80.0; // 拖动后固定的最大偏移量
  final double _triggerThreshold = 40.0; // 触发固定的最小拖动距离

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      // 监听拖动更新，限制偏移范围
      onPanUpdate: (details) {
        setState(() {
          // 这里设置为向右拖动，可根据需求改为向左（把clamp的0和_maxFixedOffset调换）
          _dragOffset = (_dragOffset + details.delta.dx).clamp(0.0, _maxFixedOffset);
        });
      },
      // 拖动结束时，判断是否固定
      onPanEnd: (details) {
        setState(() {
          if (_dragOffset >= _triggerThreshold) {
            _dragOffset = _maxFixedOffset;
          } else {
            _dragOffset = 0.0;
          }
        });
      },
      // 用AnimatedContainer实现平滑过渡
      child: AnimatedContainer(
        duration: const Duration(milliseconds: 200),
        transform: Matrix4.translationValues(_dragOffset, 0, 0),
        child: Container(
          padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
          decoration: BoxDecoration(
            border: Border(bottom: BorderSide(color: Colors.grey.shade200)),
            color: Colors.white,
          ),
          child: Row(
            children: [
              Expanded(child: Text(widget.content)),
              // 拖动后显示操作按钮
              if (_dragOffset > 0)
                Row(
                  children: [
                    IconButton(
                      icon: const Icon(Icons.mark_email_read, color: Colors.blue),
                      onPressed: () { /* 执行标记已读操作 */ },
                    ),
                    IconButton(
                      icon: const Icon(Icons.delete, color: Colors.red),
                      onPressed: () { /* 执行删除操作 */ },
                    ),
                  ],
                ),
            ],
          ),
        ),
      ),
    );
  }
}

使用方式 #

直接把这个Widget放到ListView里即可：

ListView.builder(
  itemCount: 10,
  itemBuilder: (context, index) {
    return PartiallyDraggableListItem(content: "列表项 $index");
  },
)

思路2：重写Dismissible的拖动逻辑（进阶） #

如果你非要基于Dismissible改造，可以通过自定义Dismissible的onResize和修改direction、confirmDismiss来阻止完全移除，但这种方式需要深入理解Dismissible的内部机制，灵活性不如自定义方案。核心是：

• 在confirmDismiss中返回Future.value(false)，阻止项被移除
• 监听onResize回调来获取当前拖动偏移量，达到阈值时保持状态
• 但这种方式可能会有手势冲突和状态管理的问题，不推荐作为首选

注意事项 #

• 可根据需求调整拖动方向、最大偏移量和触发阈值
• 如果需要多状态（比如半固定、全固定），可以扩展状态变量来控制
• 处理列表滚动和横向拖动的手势冲突：可以使用HorizontalDragGestureRecognizer并设置gestureSettings来提高拖动手势的优先级

内容的提问来源于stack exchange，提问作者Parsa