企业官网建设流程全解析

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