| 组件名称 |
用途/适合场景 |
是否懒加载 |
支持列表结构 |
用法复杂度 |
| SingleChildScrollView |
适用于内容数量不大、不重复的页面（如表单、静态内容） |
❌ 否 |
❌ 否 |
⭐⭐ |
| ListView |
适用于垂直方向的长列表，自动滚动；适合展示大量数据 |
✅ 支持 |
✅ 是 |
⭐⭐ |
| ListView.builder |
优化版 ListView，适合超长动态列表，按需懒加载构建 |
✅ 强烈推荐 |
✅ 是 |
⭐⭐⭐ |
| GridView |
适用于网格状布局，如图片列表 |
✅ 支持 |
✅ 是（网格） |
⭐⭐⭐ |
| CustomScrollView |
高级滚动视图，组合多个滚动子元素（如 SliverAppBar + SliverList） |
✅ 支持 |
✅ 是（灵活 |
⭐⭐⭐⭐ |
| PageView |
水平翻页，用于页面轮播、引导页、Tab 内容切换等 |
✅ 每页懒加载 |
❌ 否 |
⭐⭐ |
| Scrollable（低阶） |
最底层滚动组件，通常不建议直接使用，除非自定义滚动行为 |
❓ 取决于实现 |
❓ |
⭐⭐⭐⭐⭐ |
常见使用场景说明
- SingleChildScrollView
适合非列表型的页面，比如表单、图文页面。
SingleChildScrollView(
child: Column(
children: [...],
),
)
- 不支持懒加载
- 所有子项一次性渲染
- 不建议用于长列表，性能差
- ListView / ListView.builder
适合列表型页面（如聊天记录、新闻列表、商品列表等）
ListView(
children: [
Text('Item 1'),
Text('Item 2'),
],
)
// 更推荐
ListView.builder(
itemCount: 1000,
itemBuilder: (context, index) => Text('Item $index'),
)
- 支持滚动
- 支持懒加载（builder 模式）
- 更适合长内容
- GridView
用于网格状内容（如相册、九宫格）
GridView.count(
crossAxisCount: 2,
children: [...],
)
- 有滚动能力
- 可用于横向或纵向
- 可指定网格数量、间距
- CustomScrollView + Slivers
用于构建更复杂滚动效果，比如顶部可折叠 AppBar + 列表内容
CustomScrollView(
slivers: [
SliverAppBar(
expandedHeight: 200,
flexibleSpace: FlexibleSpaceBar(title: Text('标题')),
pinned: true,
),
SliverList(
delegate: SliverChildBuilderDelegate(
(context, index) => ListTile(title: Text('Item $index')),
childCount: 50,
),
),
],
)
- 高度可定制，滚动联动效果
- 用于复杂的 UI 页面（如首页、动态页）
- PageView
PageView(
children: [
Container(color: Colors.red),
Container(color: Colors.green),
],
)
- 适用于引导页、卡片轮播、Tab 页
- 支持左右/上下滑动
- 支持手势控制、自动翻页
总结建议
| 页面类型 |
推荐滚动组件 |
| 表单、静态信息页面 |
SingleChildScrollView |
| 聊天、列表、动态加载页面 |
ListView.builder |
| 图片网格、宫格商品 |
GridView |
| 首页、复杂滑动结构页面 |
CustomScrollView |
| 引导页、卡片轮播 |
PageView |