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

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

常见使用场景说明

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

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

  • 不支持懒加载
  • 所有子项一次性渲染
  • 不建议用于长列表,性能差
  1. ListView / ListView.builder
    适合列表型页面(如聊天记录、新闻列表、商品列表等)

    ListView(
    children: [
    Text('Item 1'),
    Text('Item 2'),
    ],
    )

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

  • 支持滚动
  • 支持懒加载(builder 模式)
  • 更适合长内容
  1. GridView
    用于网格状内容(如相册、九宫格)

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

  • 有滚动能力
  • 可用于横向或纵向
  • 可指定网格数量、间距
  1. 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 页面(如首页、动态页)
  1. PageView

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

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

总结建议

页面类型 推荐滚动组件
表单、静态信息页面 SingleChildScrollView
聊天、列表、动态加载页面 ListView.builder
图片网格、宫格商品 GridView
首页、复杂滑动结构页面 CustomScrollView
引导页、卡片轮播 PageView
相关推荐
中微子26 分钟前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
秋田君1 小时前
深入理解JavaScript设计模式之命令模式
javascript·设计模式·命令模式
中微子1 小时前
React 状态管理 源码深度解析
前端·react.js
风吹落叶花飘荡3 小时前
2025 Next.js项目提前编译并在服务器
服务器·开发语言·javascript
加减法原则3 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
yanlele3 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
lichenyang4533 小时前
React移动端开发项目优化
前端·react.js·前端框架
你的人类朋友3 小时前
🍃Kubernetes(k8s)核心概念一览
前端·后端·自动化运维
web_Hsir3 小时前
vue3.2 前端动态分页算法
前端·算法
烛阴4 小时前
WebSocket实时通信入门到实践
前端·javascript