ListView.separated分隔列表 - 鸿蒙Flutter联系人列表场景

概述ListView.separated是ListView的一种特殊构造方式允许在列表项之间添加自定义分隔符。在联系人列表、设置页面等场景中分隔符是常见的UI元素可以提高列表的可读性。ListView.separated构造函数ListView.separated({Key?key,AxisscrollDirectionAxis.vertical,bool reversefalse,ScrollController?controller,bool?primary,ScrollPhysics?physics,EdgeInsetsGeometry?padding,bool shrinkWrapfalse,double?itemExtent,Widget?prototypeItem,requiredIndexedWidgetBuilderitemBuilder,// 项构建器requiredIndexedWidgetBuilderseparatorBuilder,// 分隔符构建器required int itemCount,// 项数量bool addAutomaticKeepAlivestrue,bool addRepaintBoundariestrue,bool addSemanticIndexestrue,int?semanticChildCount,})核心属性详解separatorBuilder分隔符构建器是一个回调函数接收context和index参数返回一个Widget作为分隔符separatorBuilder:(context,index){returnDivider(height:1,color:Colors.grey);}itemBuilder项构建器与ListView.builder相同itemBuilder:(context,index){returnListTile(title:Text(Item$index));}itemCount项数量分隔符数量为itemCount - 1itemCount:100,// 100个列表项99个分隔符基本用法示例简单分隔列表ListView.separated(itemCount:20,itemBuilder:(context,index){returnListTile(title:Text(联系人$index));},separatorBuilder:(context,index){returnconstDivider(height:1);},)自定义分隔符ListView.separated(itemCount:20,itemBuilder:(context,index){returnListTile(title:Text(联系人$index));},separatorBuilder:(context,index){returnContainer(height:10,color:Colors.grey[100],child:constCenter(child:Text(---),),);},)联系人列表实战基础联系人列表ListView.separated(itemCount:20,padding:EdgeInsets.symmetric(vertical:8),itemBuilder:(context,index){returnListTile(leading:constCircleAvatar(child:Icon(Icons.person),),title:Text(联系人$index),subtitle:Text(1380000${index.toString().padLeft(4,0)}),trailing:constIcon(Icons.phone),);},separatorBuilder:(context,index){returnconstDivider(height:1,color:Colors.grey);},)带分组的联系人列表ListView.separated(itemCount:26,itemBuilder:(context,index){finalletterString.fromCharCode(65index);returnColumn(children:[Container(padding:EdgeInsets.symmetric(horizontal:16,vertical:8),color:Colors.grey[100],child:Row(children:[Text(letter,style:TextStyle(fontWeight:FontWeight.bold)),SizedBox(width:16),Text(联系人列表),],),),ListTile(leading:constCircleAvatar(child:Icon(Icons.person)),title:Text($letter开头的联系人),),],);},separatorBuilder:(context,index){returnconstSizedBox(height:8);},)自定义分隔符样式虚线分隔符ListView.separated(itemCount:10,itemBuilder:(context,index){returnListTile(title:Text(项目$index));},separatorBuilder:(context,index){returnContainer(height:1,margin:EdgeInsets.symmetric(horizontal:16),decoration:BoxDecoration(border:Border(bottom:BorderSide(color:Colors.grey,width:1,style:BorderStyle.dashed),),),);},)渐变分隔符ListView.separated(itemCount:10,itemBuilder:(context,index){returnListTile(title:Text(项目$index));},separatorBuilder:(context,index){returnContainer(height:2,decoration:BoxDecoration(gradient:LinearGradient(colors:[Colors.transparent,Colors.blue,Colors.transparent],begin:Alignment.centerLeft,end:Alignment.centerRight,),),);},)带图标分隔符ListView.separated(itemCount:5,itemBuilder:(context,index){returnListTile(title:Text(菜单项$index));},separatorBuilder:(context,index){returnconstPadding(padding:EdgeInsets.symmetric(horizontal:16),child:Row(children:[Expanded(child:Divider()),Padding(padding:EdgeInsets.symmetric(horizontal:8),child:Icon(Icons.star,size:12,color:Colors.grey),),Expanded(child:Divider()),],),);},)设置页面实战完整设置页面ListView.separated(itemCount:8,padding:EdgeInsets.zero,itemBuilder:(context,index){finalsettings[{icon:Icons.person,title:个人信息},{icon:Icons.notifications,title:通知设置},{icon:Icons.lock,title:隐私设置},{icon:Icons.language,title:语言设置},{icon:Icons.display,title:显示设置},{icon:Icons.sound,title:声音设置},{icon:Icons.help,title:帮助与反馈},{icon:Icons.info,title:关于},];returnListTile(leading:Icon(settings[index][icon]),title:Text(settings[index][title]),trailing:constIcon(Icons.chevron_right),);},separatorBuilder:(context,index){returnconstDivider(height:1);},)ListView.separated vs Divider手动添加// 使用ListView.separatedListView.separated(itemCount:10,itemBuilder:(context,index)Text(Item$index),separatorBuilder:(context,index)Divider(),)// 使用ListView手动添加DividerListView(children:[for(int i0;i10;i)...[Text(Item$i),if(i9)Divider(),],],)性能对比特性ListView.separated手动添加Divider代码简洁度高低内存占用低懒加载高全部创建适合场景大量数据少量数据维护难度低高关键要点总结separatorBuilder用于创建分隔符分隔符数量为itemCount - 1可以自定义分隔符样式不限于Divider适合联系人列表、设置页面等场景性能与ListView.builder相当支持懒加载常见问题Q1: 如何在第一个或最后一个列表项添加分隔符A: ListView.separated只在列表项之间添加分隔符不在首尾添加。如需首尾分隔符需要手动添加。Q2: 分隔符可以不同吗A: 可以通过index参数判断并返回不同的分隔符。Q3: 如何实现分组列表A: 在itemBuilder中返回分组标题和列表项的组合separatorBuilder返回分组间距。Q4: 性能如何A: 与ListView.builder相同支持懒加载性能优异。实践建议联系人列表使用Divider作为分隔符设置页面使用Divider或自定义分隔符分组列表在itemBuilder中处理分组逻辑大量数据使用ListView.separated的懒加载特性自定义样式根据设计稿自定义separatorBuilder通过合理使用ListView.separated可以创建出清晰、美观的分隔列表提高用户体验。