| 组件名称 | 用途/适合场景 | 是否懒加载 | 支持列表结构 | 用法复杂度 |
|---|
| 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 |
