Flutter中如何修改ReorderableListView.builder的拖拽图标

要替换默认的“=”拖拽图标或调整其位置，最直接的方式是关闭默认拖拽手柄，自定义拖拽触发区域，具体实现如下：

核心步骤 #

1. 在ReorderableListView.builder中添加buildDefaultDragHandles: false，禁用默认拖拽图标。
2. 在列表项布局中，使用ReorderableDragStartListener包裹自定义图标，将其放在任意位置（左、右、中间均可），并绑定当前列表项的index。

修改后的完整代码 #

ReorderableListView.builder(
  buildDefaultDragHandles: false, // 关闭默认拖拽手柄
  itemBuilder: (context, index) {
    final item = items!.elementAt(index);
    return GestureDetector(
      key: Key("$index"),
      onLongPress: () {
        // 保留原有的长按逻辑
      },
      onTap: () {
        // 保留原有的点击逻辑
        setState(() {});
      },
      child: Container(
        margin: const EdgeInsets.all(10),
        decoration: BoxDecoration(
          boxShadow: [
            BoxShadow(
              color: Colors.grey.withOpacity(0.5),
              spreadRadius: 5,
              blurRadius: 7,
              offset: const Offset(0, 3),
            ),
          ],
          border: Border.all(),
          borderRadius: BorderRadius.circular(10),
          color: const Color.fromARGB(255, 60, 183, 255),
        ),
        height: 60,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            // 自定义拖拽图标（放在左侧，可调整到任意位置）
            ReorderableDragStartListener(
              index: index,
              child: const Padding(
                padding: EdgeInsets.only(left: 20),
                child: Icon(
                  Icons.drag_indicator, // 替换为你需要的图标
                  size: 30,
                ),
              ),
            ),
            Expanded(
              child: Padding(
                padding: const EdgeInsets.only(left: 20),
                child: Text(
                  items!.elementAt(index).split("|")[0],
                  style: const TextStyle(fontSize: 25),
                ),
              ),
            ),
            GestureDetector(
              onTap: () {
                // 保留原有的删除逻辑
              },
              child: const Padding(
                padding: EdgeInsets.only(right: 30),
                child: Icon(
                  Icons.delete_forever_rounded,
                  size: 30,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  },
  itemCount: items?.length ?? 0,
  onReorder: (int oldIndex, int newIndex) {
    setState(() {
      if (newIndex > oldIndex) {
        newIndex -= 1;
      }
      final item = items!.removeAt(oldIndex);
      items!.insert(newIndex, item);
      saveData();
    });
  },
),

关键说明 #

• buildDefaultDragHandles: false：彻底关闭默认拖拽图标，避免和自定义组件冲突。
• ReorderableDragStartListener：负责触发拖拽事件，绑定index后，点击/长按该组件即可启动对应列表项的拖拽排序，你可以将它放在布局的任意位置，包裹任何Widget作为拖拽提示。
• 用Expanded包裹文本组件，避免自定义图标挤压文字布局，保证界面正常显示。

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