高职示范校建设网站,网上注册公司的章程怎么下载出来,wordpress tag插件,网站 手机版网站开发合同文章目录 概念介绍添加方法使用属性装饰器 示例代码经验总结#xff1a; 我们在上一章回中介绍了多种创建ListView的方式,本章回中将介绍
如何给ListView添加分隔线.闲话休提#xff0c;让我们一起Talk Flutter吧。 概念介绍
我们在这里说的分隔线也叫Divider,… 文章目录 概念介绍添加方法使用属性装饰器 示例代码经验总结 我们在上一章回中介绍了多种创建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添加分隔线相关的内容就介绍到这里欢迎大家在评论区交流与讨论!
