flutter listview 设置分割线

最新推荐文章于 2025-04-19 17:22:52 发布

原创最新推荐文章于 2025-04-19 17:22:52 发布 · 置顶 · 8k 阅读

0 ·

CC 4.0 BY-SA版权

本文为博主原创文章，未经博主允许不得转载。

文章标签：

#flutter #listview #分割线

flutter 专栏收录该内容

72 篇文章

订阅专栏

在Flutter中，可以通过ListView.separated方便地设置分割线，但若使用ListView.builder，则需在itemBuilder内手动添加。示例展示了如何实现效果，详情可见作者在简书、优快云和掘金的分享。

使用ListView.separated,就很简单了

  ListView.separated(
        scrollDirection: direction,
        itemBuilder: (context, index) {
          final Axis slidableDirection =
              direction == Axis.horizontal ? Axis.vertical : Axis.horizontal;
          return _getSlidableWithLists(context, index, slidableDirection);
        },
        itemCount: list.length,
        separatorBuilder: (BuildContext context, int index) =>
            Divider(height: 1.0, color: AppColors.separator),
      );

如果使用ListView.builder,没有这个属性,需要自己在itemBuilder中增加下划线

ListView.builder(
              shrinkWrap: true,
              physics: NeverScrollableScrollPhysics(),
              itemBuilder: (BuildContext context, int index) =>
                  GroupContactItem(_headData[index], groupModel),
              itemCount: _headData.length)
        ],

效果如下:

喜欢可以加Q群号:913934649,点赞,评论;