每日tips:使用 ListView.separated 添加分隔符

用户1974410

发布于 2022-09-20 16:55:44

6790

发布于 2022-09-20 16:55:44

ListView.separated（https://api.flutter.dev/flutter/widgets/ListView/ListView.separated.html）是一个很方便的 API，可以使用它在列表项间添加分隔符。

可以看看官方文档的说明：

❝Separators only appear between list items: separator 0 appears after item 0 and the last separator appears before the last item. ❞

大意就是第一项上方和最后项下方没有分隔符。

在ios设备上，这种效果很明显，那我们如何在listview上第一和最后都加上分隔符呢。

我们可以通过追加一个不显示的第一项和最后一项，如下：

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

Happy Coding!

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2022-01-18，如有侵权请联系 cloudcommunity@tencent.com 删除

listview