Flutter ReorderableListView-如何添加分隔线

时间:2020-07-25 19:30:56

标签: flutter dart

我有一个使用ReorderableListView创建的列表。我想用分隔线将每个列表项分开。我正在寻找一种类似于ListView.separated()的干净解决方案,但是我找不到与ReorderableListView类似的东西。目前,在我的代码中,我使用了一个列小部件,在其中为每个项目添加了一个分隔符,但这非常“ hacky”。您知道如何更好地实现吗?

我正在寻找像这样的分隔线:

enter image description here

我的代码:

主页:

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,
    );
  }

0 个答案:

没有答案