Flutter ListView 全解：从 RecyclerView 到声明式列表

如果你是 Android 工程师，第一次写 Flutter 列表，大概率会懵：

Adapter 呢？ViewHolder 呢？notify 呢？

本文从 Android 体系出发，讲清 Flutter ListView 的设计思想、工程用法、架构落地方式。

一、ListView 到底是什么？（对标 Android 心智模型）

在 Android 里，一个列表至少包含：

• RecyclerView（容器）
• Adapter（数据桥梁）
• ViewHolder（视图缓存）
• LayoutManager（布局策略）

Flutter 中，这一整套被压缩成一个东西：

ListView.builder(...)

👉 Flutter 的列表本质是：

UI = f(state)

ListView = "状态到视图的映射函数"

Flutter 没有 Adapter，是因为 Widget 本身就是 View + ViewHolder + Binder 的合体。

二、ListView 的 4 种核心构造方式

1️⃣ ListView(children) ------ 静态列表

ListView(
  children: [
    Text("A"),
    Text("B"),
    Text("C"),
  ],
)

特点：

• 一次性创建全部子组件
• 适合菜单 / 设置页
• ❌ 不适合长列表

👉 对标：ScrollView + LinearLayout

2️⃣ ✅ ListView.builder ------ 企业级标准写法

ListView.builder(
  itemCount: users.length,
  itemBuilder: (context, index) {
    return Text(users[index]);
  },
)

特点：

• 懒加载
• 自动回收
• 高性能

👉 对标 RecyclerView：

onCreateViewHolder()
onBindViewHolder()

Flutter 把这两步融合成了 itemBuilder。

3️⃣ ListView.separated ------ 带分割线

ListView.separated(
  itemCount: users.length,
  itemBuilder: (_, i) => Text(users[i]),
  separatorBuilder: (_, i) => Divider(),
)

👉 对标 RecyclerView 的 ItemDecoration。

4️⃣ ListView.custom ------ Sliver 级用法（进阶）

用于复杂滚动体系（AppBar 折叠 / 吸顶 / 混合布局），底层基于 Sliver。

三、工程级推荐写法（非常重要）

❌ 错误示范（新手写法）

ListView.builder(
  itemBuilder: (_, i) {
    return Container(
      padding: EdgeInsets.all(16),
      child: Row(
        children: [
          Icon(Icons.person),
          Text(users[i]),
        ],
      ),
    );
  },
)

问题：

• 结构混乱
• 不可复用
• 不可测试
• 架构会烂

✅ 工程级写法（强烈推荐）

class UserListPage extends StatelessWidget {
  final users = ["Tom", "Jack", "Lucy"];

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: users.length,
      itemBuilder: (context, index) {
        return UserItem(users[index]);
      },
    );
  }
}

class UserItem extends StatelessWidget {
  final String name;

  const UserItem(this.name);

  @override
  Widget build(BuildContext context) {
    return ListTile(
      leading: Icon(Icons.person),
      title: Text(name),
    );
  }
}

✔ item 独立组件化

✔ 方便维护 / 测试 / 复用

✔ 架构清晰

✔ 易接状态管理

👉 对标 Android：独立 ViewHolder + item layout。

四、ListView 常用核心参数（高频面试点）

ListView.builder(
  scrollDirection: Axis.vertical,
  itemCount: 100,
  controller: scrollController,
  physics: BouncingScrollPhysics(),
  padding: EdgeInsets.all(12),
)

常考点：

• 滚动监听 → ScrollController
• 分页加载 → position.maxScrollExtent
• 滚动控制 → jumpTo / animateTo
• 保持位置 → PageStorageKey

五、下拉刷新 + 上拉分页（企业必会）

下拉刷新

RefreshIndicator(
  onRefresh: refresh,
  child: ListView.builder(...)
)

上拉加载

controller.addListener(() {
  if (controller.position.pixels >=
      controller.position.maxScrollExtent - 100) {
    loadMore();
  }
});

👉 对标 Android：SwipeRefreshLayout + OnScrollListener。

六、为什么 Flutter 列表不需要 notifyDataSetChanged？

在 Flutter 中：

setState(() {
  users = newList;
});

框架会自动：

• diff Widget
• 复用 Element
• 复用 RenderObject

👉 本质是 声明式 + 响应式 UI。

你不是"刷新列表"，

你是在"修改状态"。

七、ListView 的架构级理解

Flutter 列表不是控件，而是渲染结果：

State → Widget → Element → RenderObject → GPU

你真正维护的只有一件事：

👉 状态

这和你熟悉的：

• Jetpack Compose
• React
• SwiftUI

是同一思想体系。

八、进阶方向（拉开普通工程师差距）

• SliverList / CustomScrollView
• 大列表性能优化
• 列表状态建模
• 通用列表架构封装
• 可插拔 item 体系

九、总结一句话

Flutter 的 ListView：

不是 RecyclerView 的替代品，

而是 UI 编程范式的升级。

从：

👉 "控制视图"

到：

👉 "描述状态"。

下两篇：

Flutter 列表 + Riverpod 架构实战 ------ 从 setState 到状态驱动列表的工程落地

Flutter 大列表性能优化专项篇 ------ 真正能拉开工程师层级的地方