用ListView.separated添加顶部和底部分隔符

491 阅读1分钟

ListView.separated是一个方便的API,我们可以用它来在FlutterListView内的项目之间添加分隔符。

根据文档

分隔符只出现在列表项之间:分隔符0出现在第0项之后,最后一个分隔符出现在最后一项之前。

这意味着在第一项的上方和最后一项的下方都没有分隔符。

这在iOS上视觉上是很明显的,因为iOS上的列表默认是可以过度滚动的。 这里有一些代码,可以把事情搞清楚,并在你的ListViews中添加上下分隔符。

class ListViewWithAllSeparators<T> extends StatelessWidget {
  const ListViewWithAllSeparators({Key key, this.items, this.itemBuilder}) : super(key: key);
  final List<T> items;
  final Widget Function(BuildContext context, T item) itemBuilder;

  @override
  Widget build(BuildContext context) {
    return ListView.separated(
      itemCount: items.length + 2,
      separatorBuilder: (_, __) => Divider(height: 0.5),
      itemBuilder: (context, index) {
        if (index == 0 || index == items.length + 1) {
          return Container(); // zero height: not visible
        }
        return itemBuilder(context, items[index - 1]);
      },
    );
  }
}

不客气。 😉