Flutter中drag_and_drop_lists插件SingleChildScrollView截断Column高度问题

问题根源 #

插件源码第156行的SingleChildScrollView设置了physics: NeverScrollableScrollPhysics()，同时布局约束限制了高度，导致长subtitle内容被截断；移除该属性后，滚动视图布局计算异常，引发ListTile标题消失。

可行解决办法 #

1. 修改插件源码（最直接有效） #

找到插件对应位置的SingleChildScrollView，调整布局逻辑：

• 若不需要滚动，直接替换为IntrinsicHeight让子组件自适应高度：

  // 原代码
  SingleChildScrollView(
    physics: NeverScrollableScrollPhysics(),
    child: child,
  )
  
  // 修改后
  IntrinsicHeight(
    child: child,
  )
  

• 若需要滚动查看长内容，保留SingleChildScrollView并调整物理属性与高度适配：

  SingleChildScrollView(
    physics: AlwaysScrollableScrollPhysics(),
    child: IntrinsicHeight(
      child: child,
    ),
  )
  

修改后重新编译项目，即可解决高度截断和标题消失问题。

2. 自定义ListTile布局适配 #

不修改插件的前提下，调整ListTile的subtitle布局，强制内容自适应：

ListTile(
  title: const Text('固定标题'),
  subtitle: Text(
    '超长的subtitle内容，这里可以放很多很多文字，确保内容能自动换行显示完整',
    maxLines: null, // 取消行数限制
    overflow: TextOverflow.visible, // 允许内容溢出换行
  ),
  // 也可以用Wrap包裹subtitle
  // subtitle: Wrap(
  //   children: [Text('超长的subtitle内容...')],
  // ),
)

此方法适合临时快速解决，但极端长文本场景下仍可能受插件布局约束影响。

3. 替换为其他拖拽插件 #

如果不想修改第三方源码，可更换为布局适配更完善的拖拽库，比如flutter_reorderable_list：

ReorderableListView(
  children: yourDataList.map((item) => ListTile(
    key: Key(item.uniqueId),
    title: Text(item.title),
    subtitle: Text(item.longSubtitle),
  )).toList(),
  onReorder: (oldIndex, newIndex) {
    // 实现拖拽重排逻辑
    if (newIndex > oldIndex) newIndex--;
    final item = yourDataList.removeAt(oldIndex);
    yourDataList.insert(newIndex, item);
  },
)

这类原生风格的拖拽库布局逻辑更稳定，不易出现高度适配问题。

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