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