Flutter 零基础入门（二十八）：ListView —— 最常用的页面结构-开发者社区

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(), ), ); } }