Flutter ReorderableListView - 如何添加分隔线

Question

我有一个使用 ReorderableListView 创建的列表。我想要一个带有分隔符的单独的每个列表项。我正在寻找一个干净的解决方案，类似于 ListView.separated()，但是我找不到与 ReorderableListView 类似的任何内容。目前，在我的代码中，我使用一个列小部件，为每个项目添加一个分隔线，但这非常“hacky”。您知道如何以更好的方式实施这一点吗？

我正在寻找这样的分隔符：

我的代码：

主页：

Widget _buildList(RoutinesState state) {
if (state is RoutinesFetched || state is RoutinesReordered) {
  List<CustomCard> cards = [];
  state.routines.forEach(
    (e) {
      cards.add(
        CustomCard(
          key: PageStorageKey(UniqueKey()),
          title: e.name,
          onTap: () {
            Navigator.pushNamed(
              context,
              RoutineDetails.PAGE_ROUTE,
              arguments: RoutineDetailsArgs(e),
            );
          },
          includeDivider: cards.isNotEmpty,
        ),
      );
    },
  );

  return ReorderableListView(
    children: cards,
    onReorder: (int from, int to) => {
      bloc.add(ReorderRoutine(fromIndex: from, toIndex: to)),
    },
  );
}

return Container(
  child: Text("No routines found yet :( "),
);

}

自定义卡片小部件：

      @override
   Widget build(BuildContext context) {
     List<Widget> columnItems = [];
     if (this.includeDivider) {
        columnItems.add(Divider());
     }

    columnItems.add(ListTile(
      leading: CircleAvatar(
        child: Icon(Icons.fitness_center),
      ),
      title: Text(this.title),
      subtitle: Text("Weights"),
      trailing: ActionChip(
        label: Icon(Icons.play_arrow),
        backgroundColor: Color(0xffECECEC),
        onPressed: () => null,
      ),
      onTap: this.onTap,
    ));

    return Column(
      mainAxisSize: MainAxisSize.min,
      children: columnItems,
    );
  }

Answer 1

使用Divider是正确的，因为它通常在 ListTiles 中使用，顾名思义：分隔符。使用列来定义 ListTile 中的小部件并不是“hacky”，您只是按照使用方式在 ListTile 中定义小部件即可。另外，由于 Divider 是添加在 ListTile 中的，因此当拖动图块时，Divider 将按照预期与整个 ListTile 一起移动。