flutter长列表 ListView、GridView、SingleChildScrollView、CustomScrollView区别

组件名称	用途/适合场景	是否懒加载	支持列表结构	用法复杂度
SingleChildScrollView	适用于内容数量不大、不重复的页面（如表单、静态内容）	❌ 否	❌ 否	⭐⭐
ListView	适用于垂直方向的长列表，自动滚动；适合展示大量数据	✅ 支持	✅ 是	⭐⭐
ListView.builder	优化版 ListView，适合超长动态列表，按需懒加载构建	✅ 强烈推荐	✅ 是	⭐⭐⭐
GridView	适用于网格状布局，如图片列表	✅ 支持	✅ 是（网格）	⭐⭐⭐
CustomScrollView	高级滚动视图，组合多个滚动子元素（如 SliverAppBar + SliverList）	✅ 支持	✅ 是（灵活	⭐⭐⭐⭐
PageView	水平翻页，用于页面轮播、引导页、Tab 内容切换等	✅ 每页懒加载	❌ 否	⭐⭐
Scrollable（低阶）	最底层滚动组件，通常不建议直接使用，除非自定义滚动行为	❓ 取决于实现	❓	⭐⭐⭐⭐⭐

常见使用场景说明

1. SingleChildScrollView
   适合非列表型的页面，比如表单、图文页面。

SingleChildScrollView(child: Column(children: [...],),
)

• 不支持懒加载
• 所有子项一次性渲染
• 不建议用于长列表，性能差

2. ListView / ListView.builder
   适合列表型页面（如聊天记录、新闻列表、商品列表等）

ListView(children: [Text('Item 1'),Text('Item 2'),],
)// 更推荐
ListView.builder(itemCount: 1000,itemBuilder: (context, index) => Text('Item $index'),
)

• 支持滚动
• 支持懒加载（builder 模式）
• 更适合长内容

3. GridView
   用于网格状内容（如相册、九宫格）

GridView.count(crossAxisCount: 2,children: [...],
)

• 有滚动能力
• 可用于横向或纵向
• 可指定网格数量、间距

4. 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 页面（如首页、动态页）

5. PageView

PageView(children: [Container(color: Colors.red),Container(color: Colors.green),],
)

• 适用于引导页、卡片轮播、Tab 页
• 支持左右/上下滑动
• 支持手势控制、自动翻页

总结建议

页面类型	推荐滚动组件
表单、静态信息页面	SingleChildScrollView
聊天、列表、动态加载页面	ListView.builder
图片网格、宫格商品	GridView
首页、复杂滑动结构页面	CustomScrollView
引导页、卡片轮播	PageView