核心内容摘要
降维打击还是灵魂共振？如何悄无声息地，“潜入”那个比你小的女生的心里
Flutter 零基础入门二十八ListView —— 最常用的页面结构在上一篇中我们彻底搞懂了StatefulWidget 的生命周期initState / build / disposeFlutter 页面是如何“活起来”的从这一篇开始我们进入Flutter 业务开发的核心场景列表页面几乎所有 App80% 的页面都是“列表”。
为什么 ListView 这么重要真实 App 中常见的页面新闻列表商品列表聊天记录设置页用户列表 它们本质上都是一列可以滚动的 Widget
ListView 是什么在 Flutter 中ListView 是一个可滚动的 Widget 列表特点支持滚动自动处理溢出适合纵向内容很多的页面
最简单的 ListViewListView(children:[Text(第一项),Text(第二项),Text(第三项),],)效果自动纵向排列超出屏幕可以滚动
ListView ListTile入门必会1️⃣ ListTile 是什么ListTile是 Flutter 提供的标准列表项组件。
ListTile( title: Text(标题), )2️⃣ 一个完整 ListTileListTile( leading: Icon(Icons.person), title: Text(用户名), subtitle: Text(这是副标题), trailing: Icon(Icons.arrow_forward_ios), )这是非常标准、非常常见的列表样式。
3️⃣ ListView ListTile 示例ListView( children: [ ListTile(title: Text(设置)), ListTile(title: Text(账号)), ListTile(title: Text(关于)), ], )
ListView.builder真正的实战重点非常重要1️⃣ 为什么需要 builder当数据很多时❌ children 一次性创建所有 Widget✅ builder 按需创建性能更好2️⃣ 基本写法ListView.builder( itemCount: 20, itemBuilder: (context, index) { return ListTile( title: Text(第 $index 项), ); }, ) 记住一句话builder 是“用一个模板生成很多项”3️⃣ itemBuilder 参数说明(BuildContext context, int index)context当前列表项的上下文index当前项的下标从 0 开始
使用数据列表生成 UI真实开发final ListString items [苹果, 香蕉, 橘子]; ListView.builder( itemCount: items.length, itemBuilder: (context, index) { return ListTile( title: Text(items[index]), ); }, ) 这是数据驱动 UI 的第一步。
列表项点击非常常见ListView.builder( itemCount: items.length, itemBuilder: (context, index) { return InkWell( onTap: () { print(点击了 ${items[index]}); }, child: ListTile( title: Text(items[index]), ), ); }, )
ListView 中的分割线1️⃣ DividerDivider()2️⃣ ListView.separated推荐ListView.separated( itemCount: items.length, itemBuilder: (context, index) { return ListTile( title: Text(items[index]), ); }, separatorBuilder: (context, index) { return Divider(); }, )分割线逻辑更清晰
ListView 常见错误与解决方案❌ 错误 1ListView 放在 Column 中报错Column( children: [ ListView(...), ], )❗ 报错原因ListView 没有高度约束✅ 正确写法ExpandedColumn( children: [ Expanded( child: ListView(...), ), ], )❌ 错误 2嵌套滚动冲突初学阶段建议一个页面只用一个 ListView
一个完整“真实页面”示例class ListDemoPage extends StatelessWidget { final ListString items [ 个人信息, 账号设置, 隐私, 关于我们, ]; override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text(设置)), body: ListView.separated( itemCount: items.length, itemBuilder: (context, index) { return ListTile( title: Text(items[index]), trailing: Icon(Icons.arrow_forward_ios, size:
, onTap: () { print(items[index]); }, ); }, separatorBuilder: (_, __) Divider(), ), ); } }
新手常见误区
总结❌ 不会用 builder❌ children 写死大量数据❌ ListView 嵌套 Column 不加 Expanded❌ 列表项布局混乱
这一篇你真正学会了什么你已经掌握了ListView 的作用ListView.builder 的核心思想数据驱动列表 UI点击列表项分割线的正确用法你现在已经能写出真正的业务页面列表结构
十三、