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

发布时间：2026/9/20 21:04:26

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可以创建出清晰、美观的分隔列表提高用户体验。

相关新闻

ListView.builder懒加载 - 鸿蒙Flutter大数据列表优化

ListView.builder懒加载 - 鸿蒙Flutter大数据列表优化

概述 ListView.builder是ListView的懒加载模式，只在需要时才创建可见的列表项，适合大数据列表场景。在新闻资讯应用中，当新闻数量较多时，使用ListView.builder可以显著提高性能和内存效率。 ListView.builder构造函数 ListView…

2026/9/20 16:41:44 阅读更多 →
如何快速入门twostreamfusion：10分钟搭建视频动作识别环境完整指南

如何快速入门twostreamfusion：10分钟搭建视频动作识别环境完整指南

如何快速入门twostreamfusion：10分钟搭建视频动作识别环境完整指南 【免费下载链接】twostreamfusion Code release for "Convolutional Two-Stream Network Fusion for Video Action Recognition", CVPR 2016. 项目地址: https://gitcode.com/gh_mirro…

2026/9/18 22:22:31 阅读更多 →
Unity WebGL打包实战：从性能优化到部署上线的完整解决方案

Unity WebGL打包实战：从性能优化到部署上线的完整解决方案

1. 项目概述：Unity WebGL打包的“最后一公里”挑战 做Unity开发的朋友，尤其是涉及到前端展示或者轻量级游戏分发的，WebGL打包绝对是一个绕不开的环节。它听起来很美——把Unity项目直接变成网页，用户点开链接就能玩，无…

2026/9/16 10:23:57 阅读更多 →

最新新闻

SpringBoot+Vue美发门店管理系统：从需求分析到部署实战

SpringBoot+Vue美发门店管理系统：从需求分析到部署实战

简介：基于JavaSpringBootVueHTML5构建的美发门店管理系统，专为美发店日常运营与数字化升级打造，覆盖顾客、预约、员工、服务项目、库存、财务及收银等核心业务模块，适合门店管理者快速上线信息化工具，也适合开发者学习…

2026/9/20 21:04:24 阅读更多 →
如何批量导出QQ空间历史说说：GetQzonehistory备份使用指南

如何批量导出QQ空间历史说说：GetQzonehistory备份使用指南

如何批量导出QQ空间历史说说：GetQzonehistory备份使用指南 【免费下载链接】GetQzonehistory 获取QQ空间发布的历史说说 项目地址: https://gitcode.com/GitHub_Trending/ge/GetQzonehistory GetQzonehistory 是一个用于备份QQ空间历史说说的命令行工具&…

2026/9/20 21:04:24 阅读更多 →
Fail2Ban 服务端 action 模块源码深度解析：从 ActionBase 到 CommandAction 的封禁命令执行机制

Fail2Ban 服务端 action 模块源码深度解析：从 ActionBase 到 CommandAction 的封禁命令执行机制

网络安全运维 【免费下载链接】fail2ban Daemon to ban hosts that cause multiple authentication errors 项目地址： https://gitcode.com/gh_mirrors/fa/fail2ban 点击查看 免费下载 导读 本文基于开发者文档 doc/fail2ban.server.action.rst 对应的 fail2ban.s…

2026/9/20 21:04:24 阅读更多 →
猫抓浏览器资源嗅探扩展完整指南：3步搞定网页视频保存

猫抓浏览器资源嗅探扩展完整指南：3步搞定网页视频保存

猫抓浏览器资源嗅探扩展完整指南：3步搞定网页视频保存 【免费下载链接】cat-catch 猫抓 浏览器资源嗅探扩展 / cat-catch Browser Resource Sniffing Extension 项目地址: https://gitcode.com/GitHub_Trending/ca/cat-catch 猫抓（cat-catch&…

2026/9/20 21:04:24 阅读更多 →
uni-app 跨端扫码插件 uni-scanCode 深度解析：UTS 插件架构、三端实现与调用指南

uni-app 跨端扫码插件 uni-scanCode 深度解析：UTS 插件架构、三端实现与调用指南

uni-app 跨端扫码插件 uni-scanCode 深度解析：UTS 插件架构、三端实现与调用指南 【免费下载链接】uni-app A cross-platform framework using Vue.js 项目地址: https://gitcode.com/gh_mirrors/un/uni-app uni-scanCode 是 uni-app 生态中基于 UTS 语言实现…

2026/9/20 21:04:24 阅读更多 →
chezmoi 模板函数 `toPrettyJson` 全解：从缩进控制到源码级实现

chezmoi 模板函数 `toPrettyJson` 全解：从缩进控制到源码级实现

开发工具CLI配置管理 【免费下载链接】chezmoi Manage your dotfiles across multiple diverse machines, securely. 项目地址： https://gitcode.com/gh_mirrors/ch/chezmoi 点击查看 免费下载 toPrettyJson 是 chezmoi 模板体系中用于生成“美化排版 JSON”的核心…

2026/9/20 21:03:23 阅读更多 →

日新闻

Flutter for OpenHarmony游戏卡片渐变背景实战：从原理到性能优化

Flutter for OpenHarmony游戏卡片渐变背景实战：从原理到性能优化

直接铺开项目本身吧。这几个月我一直在折腾一件事：用Flutter给OpenHarmony做一款游戏集合类的App，说白了就是把若干小游戏塞进一个壳里，用统一入口分发。这个方向本身不算新鲜，真正让我花了不少心思的，是首页那堆游戏卡…

2026/9/20 0:00:46 阅读更多 →
Word表格编号全攻略：从列表编号到题注交叉引用

Word表格编号全攻略：从列表编号到题注交叉引用

写Word文档，最让人头疼的往往是那些“看起来不起眼”的小问题。比如表格编号这事：今天在表后面多加了两个空白行，明天给客户交稿前发现整个章节的编号全部错位，光是挨个改序号就能耗掉大半个下午。我前阵子帮人整理一份上百页的技…

2026/9/20 0:00:46 阅读更多 →
从第一个站到第二个站：独立开发者的静态网站选型与落地实践

从第一个站到第二个站：独立开发者的静态网站选型与落地实践

1. 项目概述1.1 核心需求解析做独立开发者这几年，说实话，第一个网站上线的那天晚上我兴奋得没睡着。但等它跑了半年，流量惨淡、功能臃肿、代码自己都懒得看第二遍之后，我才慢慢琢磨明白一个道理：第一个网站是练手&…

2026/9/20 0:00:46 阅读更多 →

周新闻

Flutter for OpenHarmony游戏卡片渐变背景实战：从原理到性能优化

Flutter for OpenHarmony游戏卡片渐变背景实战：从原理到性能优化

直接铺开项目本身吧。这几个月我一直在折腾一件事：用Flutter给OpenHarmony做一款游戏集合类的App，说白了就是把若干小游戏塞进一个壳里，用统一入口分发。这个方向本身不算新鲜，真正让我花了不少心思的，是首页那堆游戏卡…

2026/9/20 0:00:46 阅读更多 →
Word表格编号全攻略：从列表编号到题注交叉引用

Word表格编号全攻略：从列表编号到题注交叉引用

写Word文档，最让人头疼的往往是那些“看起来不起眼”的小问题。比如表格编号这事：今天在表后面多加了两个空白行，明天给客户交稿前发现整个章节的编号全部错位，光是挨个改序号就能耗掉大半个下午。我前阵子帮人整理一份上百页的技…

2026/9/20 0:00:46 阅读更多 →
从第一个站到第二个站：独立开发者的静态网站选型与落地实践

从第一个站到第二个站：独立开发者的静态网站选型与落地实践

1. 项目概述1.1 核心需求解析做独立开发者这几年，说实话，第一个网站上线的那天晚上我兴奋得没睡着。但等它跑了半年，流量惨淡、功能臃肿、代码自己都懒得看第二遍之后，我才慢慢琢磨明白一个道理：第一个网站是练手&…

2026/9/20 0:00:46 阅读更多 →

月新闻

持续集成 流水线自动化与 声明式交付 实践：原型怎样变成可用功能

持续集成 流水线自动化与 声明式交付 实践：原型怎样变成可用功能

持续集成 流水线自动化与 声明式交付 实践：原型怎样变成可用功能分类：[AI/大模型]细分主题：AI 增强型 CI/CD 流水线自动化与 GitOps 实践：Agent 工作流、工具调用与任务拆解：从原型到生产的验收清单很多团队在尝试用大…

2026/9/19 23:01:36 阅读更多 →
容器编排 生产环境运维与排障实战：复盘记录怎样真正派上用场

容器编排 生产环境运维与排障实战：复盘记录怎样真正派上用场

容器编排 生产环境运维与排障实战：复盘记录怎样真正派上用场分类：[工程技术]细分主题：Kubernetes 生产环境运维与排障实战：可复制的项目复盘模板与决策记录大部分团队的事故复盘报告，最后都变成了躺在 Confluence 或钉…

2026/9/19 17:50:38 阅读更多 →
容器 容器化技术与镜像安全管理：核心链路应该先拆哪一步

容器 容器化技术与镜像安全管理：核心链路应该先拆哪一步

容器 容器化技术与镜像安全管理：核心链路应该先拆哪一步分类：[工程技术]细分主题：Docker 容器化技术与镜像安全管理：核心链路的逐步实现与关键代码取舍面对一个积累了五六年历史包袱的单体架构应用（包含 Web 接口、后台…

2026/9/19 23:35:34 阅读更多 →