Flutter 零基础入门（二十八）：ListView —— 最常用的页面结构
在上一篇中，我们彻底搞懂了：
- StatefulWidget 的生命周期
- initState / build / dispose
- Flutter 页面是如何“活起来”的
从这一篇开始，我们进入Flutter 业务开发的核心场景：
列表页面
几乎所有 App，80% 的页面都是“列表”。
一、为什么 ListView 这么重要？
真实 App 中常见的页面：
- 新闻列表
- 商品列表
- 聊天记录
- 设置页
- 用户列表
📌 它们本质上都是：
一列可以滚动的 Widget
二、ListView 是什么？
在 Flutter 中：
ListView 是一个可滚动的 Widget 列表
特点：
- 支持滚动
- 自动处理溢出
- 适合纵向内容很多的页面
三、最简单的 ListView
ListView(children:[Text('第一项'),Text('第二项'),Text('第三项'),],)效果：
- 自动纵向排列
- 超出屏幕可以滚动
四、ListView + ListTile（入门必会）
1️⃣ ListTile 是什么？
ListTile是 Flutter 提供的标准列表项组件。
ListTile( title: Text('标题'), )2️⃣ 一个完整 ListTile
ListTile( 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 List<String> 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️⃣ Divider
Divider()2️⃣ ListView.separated（推荐）
ListView.separated( itemCount: items.length, itemBuilder: (context, index) { return ListTile( title: Text(items[index]), ); }, separatorBuilder: (context, index) { return Divider(); }, )📌分割线逻辑更清晰
九、ListView 常见错误与解决方案
❌ 错误 1：ListView 放在 Column 中报错
Column( children: [ ListView(...), ], )❗ 报错原因：
ListView 没有高度约束
✅ 正确写法：Expanded
Column( children: [ Expanded( child: ListView(...), ), ], )❌ 错误 2：嵌套滚动冲突
初学阶段建议：
一个页面只用一个 ListView
十、一个完整“真实页面”示例
class ListDemoPage extends StatelessWidget { final List<String> 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: 16), onTap: () { print(items[index]); }, ); }, separatorBuilder: (_, __) => Divider(), ), ); } }十一、新手常见误区总结
❌ 不会用 builder
❌ children 写死大量数据
❌ ListView 嵌套 Column 不加 Expanded
❌ 列表项布局混乱
十二、这一篇你真正学会了什么？
你已经掌握了：
- ListView 的作用
- ListView.builder 的核心思想
- 数据驱动列表 UI
- 点击列表项
- 分割线的正确用法
你现在已经能写出：
真正的业务页面列表结构
十三、总结
本篇你学会了：
- Flutter 中最重要的滚动组件
- 列表的标准写法
- 常见布局坑点
🔜 下一篇预告
《Flutter 零基础入门（二十九）：ListView 进阶 —— 自定义列表项与复杂布局》
下一篇我们将学习：
- 自定义列表项 UI
- 列表项中嵌套 Row / Column
- 卡片式列表
- 更接近真实产品的布局
从下一篇开始：
你的 Flutter 页面将“无限接近真实商业 App” 🚀
