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” 🚀
