第二十九回：如何给ListView添加分隔线

我们在上一章回中介绍了多种创建ListView的方式,本章回中将介绍" 如何给ListView添加分隔线".闲话休提，让我们一起Talk Flutter吧。

概念介绍

我们在这里说的分隔线也叫Divider,它表示ListView中每一行或者每一列底部的横线，它主要用来区分ListView中的每个项目。默认的ListView中没有分隔线，本章回中将介绍如何给ListView添加分隔线。

添加方法

给ListView添加分隔线有两种方法，接下来我们详细介绍这两种方法：

使用属性

属性名称为separatorBuilder，该属性需要配合separated()方法使用，因为只有使用该方法创建的List才有separatorBuilder属性。我们只需要给该属性赋值就可以在ListView中添加分隔线。详细操作看代码就可以。注意该属性的类型是方法类型。

装饰器

就是在ListView的项目外层嵌套一个装饰器，相当于给ListView的每个项目都添加了一个边框，添加装饰器使用BoxDecoration Weidget,可以只添加底部的边框，也可以添加四周的边框。添加方法可以在代码中查看。

示例代码

//通过边框线来设定Divider,在第一行的顶部也会有，把边框设置为圆角后就可以看出来
Widget listEx01 = ListView.builder(
  itemCount: 8,
  itemExtent: 60,
  itemBuilder: (BuildContext context, int index) {
    //使用装饰来添加分隔线
     return Container(
       decoration: BoxDecoration(
         //只添加底部的边框线
         // border: Border(bottom: BorderSide(width: 1, color: Colors.lightBlue)),
         //添加一个边框
         // border: Border.fromBorderSide(BorderSide(width: 1,color: Colors.yellow)),
         border: Border.all(color: Colors.greenAccent, width: 1),
         //给边框设置半径，就是让装饰器的边框呈现圆角
         borderRadius: BorderRadius.circular(30),
       ),
       child: listItem(Icons.ice_skating, "$index"),
     );
  },
);

//通过separatorBuilder属性来设定divider
Widget listEx02 = ListView.separated(
    itemBuilder: (BuildContext context, int index) {
      return listItem(Icons.cabin, "$index");
    },
    separatorBuilder: (BuildContext context, int index) {
      return const Divider(
        endIndent: 1,
        height: 1,
        color: Colors.lightBlue,
      );
    },
    itemCount: 6);

在上面的代码中关键位置都添加了注释，这样方便大家理解代码。在给项目添加装饰器时，我们调整了方框的半径，这样只是为了方便观察位于项目四周的边框。编译并且运行上面的代码就可以看项目底部出现蓝色的分隔线。

经验总结：

我们在本章回中介绍了两种添加分隔线的方法：

• 一种是使用属性，访方法的缺点是位于ListView最下方的一个item没有分隔线。
• 一种是把ListView中的项目使用方形装饰器包起来，该方法的缺点是顶部也会有边框，让边框呈现圆角时会更加明显，当然只添加底部边框时不会有这种问题。

大家可以依据实际需要选择其中一种方法来给ListView添加分隔线。我不能理解的是Flutter官方为什么不提供一个属性来设置分隔线？欢迎大家在评论区交流与讨论。

看官们，关于"如何给ListView添加分隔线"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!