Flutter 零基础入门（二十八）：ListView —— 最常用的页面结构

Flutter 零基础入门（二十八）：ListView ------ 最常用的页面结构

在上一篇中，我们彻底搞懂了：

StatefulWidget 的生命周期
initState / build / dispose
Flutter 页面是如何"活起来"的

从这一篇开始，我们进入 Flutter 业务开发的核心场景：

列表页面

几乎所有 App，80% 的页面都是"列表"。

一、为什么 ListView 这么重要？

真实 App 中常见的页面：

新闻列表
商品列表
聊天记录
设置页
用户列表

📌 它们本质上都是：

一列可以滚动的 Widget

二、ListView 是什么？

在 Flutter 中：

ListView 是一个可滚动的 Widget 列表

特点：

支持滚动
自动处理溢出
适合纵向内容很多的页面

三、最简单的 ListView

dart 复制代码

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