Flutter 滚动组件总结

📚 Flutter 滚动组件总结

Flutter 中的滚动主要基于 ScrollableViewport 机制,常见的滚动组件大致可以分为以下几类:


一、单一方向滚动容器

1. SingleChildScrollView

  • 用途:让单个子组件在一个方向上可以滚动。
  • 作用/特点
    • 只能有 一个子组件
    • 常用于内容超出屏幕时的简单滚动(如长文本、表单)。
    • 支持设置 scrollDirection(默认纵向)。
  • 效果:当内容大于屏幕可视范围时,可以手指滑动滚动。
  • 缺点:所有内容会一次性渲染,性能不适合大量子组件。

二、列表类滚动组件(多子元素)

2. ListView

  • 用途:最常用的滚动列表组件。
  • 作用/特点
    • 支持垂直/水平滚动。
    • 支持四种构造方式:childrenbuilderseparatedcustom
    • 默认会懒加载子项(builder/separated)。
  • 效果:适合数据量较多的场景,如聊天列表、新闻流。

3. GridView

  • 用途:网格布局的滚动组件。
  • 作用/特点
    • 适合展示图片墙、商品列表。
    • 支持 GridView.count(指定列数)、GridView.extent(指定最大宽度)、builder(懒加载)、custom
  • 效果 :自动滚动的网格排列,性能类似 ListView

4. CustomScrollView

  • 用途:自定义滚动效果,支持组合不同的 Sliver。
  • 作用/特点
    • CustomScrollView 内部由 Sliver 组成。
    • 可以把 SliverAppBarSliverListSliverGrid 等组合在一起。
    • 常用于复杂的滚动页面(如电商首页、微博首页)。
  • 效果:支持吸顶 AppBar、局部网格 + 列表组合。

三、表格类滚动组件

5. Table / DataTable + SingleChildScrollView

  • 用途:表格数据展示(静态或动态)。
  • 作用/特点
    • DataTable 一般和 SingleChildScrollView 组合使用实现横向/纵向滚动。
    • 适合管理后台数据表格展示。
  • 效果:类似 Excel 的表格,可以滚动。

四、特殊滚动组件

6. PageView

  • 用途:页面级滚动。
  • 作用/特点
    • 支持横向/纵向整页切换。
    • 适合实现引导页、轮播图、Tab 页面。
    • 常配合 PageController 使用。
  • 效果:一屏一屏的翻页滚动,带动画。

7. NestedScrollView

  • 用途:嵌套滚动,解决多个滚动视图嵌套时的滑动冲突。
  • 作用/特点
    • 常见于 顶部 AppBar + TabBar + TabBarView
    • 支持 AppBar 折叠、吸顶效果。
  • 效果:类似微博、知乎首页,上下滑动时 AppBar 收起展开。

8. Scrollable(底层类)

  • 用途:所有滚动组件的底层基类。
  • 作用/特点
    • 一般不会直接用,而是用封装好的 ListView / GridView
    • 如果要完全自定义滚动行为,可以用它。

五、可滚动的 UI 组件

这些虽然不是专门的滚动容器,但 自带滚动能力

9. TextField / EditableText

  • 当文字内容超出时,内部会滚动。

10. Scrollbar

  • 用途:给任何可滚动组件加上滚动条。
  • 作用:提升用户体验,特别是 PC / Web 平台。
  • 效果:显示拖动条,可滑动跳转。

11. DraggableScrollableSheet

  • 用途:一个可拖动的底部面板。
  • 作用:常用于底部弹出的可拖动面板(如地图下方的地点列表)。
  • 效果:类似 Google Maps 的底部拖动面板。

六、滚动监听与控制

12. NotificationListener

  • 用途:监听滚动事件。
  • 作用:实现上拉加载、隐藏标题栏、滚动进度条。

13. ScrollController

  • 用途:控制滚动位置。
  • 作用:可实现滚动到指定位置、监听滚动距离、实现返回顶部。

📝 总结对比表

组件 主要用途 特点 使用场景
SingleChildScrollView 单子元素滚动 简单,性能差 表单、长文本
ListView 列表滚动 懒加载,性能好 新闻流、聊天记录
GridView 网格滚动 图片/商品墙 电商、相册
CustomScrollView Sliver 组合 高度自定义 首页复杂布局
PageView 整页切换 翻页效果 引导页、轮播图
NestedScrollView 嵌套滚动 解决冲突 吸顶 Tab 页
Scrollbar 滚动条 PC/Web体验好 桌面应用
DraggableScrollableSheet 底部拖动面板 可展开收缩 地图、播放器歌词
NotificationListener 滚动监听 事件响应 上拉加载、滚动隐藏 AppBar
ScrollController 滚动控制 精确定位 返回顶部、滚动动画

📌 一句话总结

  • 简单滚动SingleChildScrollView
  • 列表ListView
  • 网格GridView
  • 复杂布局CustomScrollView + Sliver
  • 整页切换PageView
  • 嵌套吸顶NestedScrollView
  • 增强体验Scrollbar / DraggableScrollableSheet / ScrollController

相关推荐
不一样的少年_15 分钟前
老板问我:AI真能一键画广州旅游路线图?我用 MCP 现场开图
前端·人工智能·后端
东方石匠16 分钟前
Javascript常见面试题
前端·javascript·面试
恋猫de小郭18 分钟前
Flutter 也有类 React Flow 的节点流程编辑器,快来了解下刚刚开源的 vyuh_node_flow
android·前端·flutter
性野喜悲18 分钟前
<script setup lang=“ts“>+uniapp实现轮播(swiper)效果
前端·javascript·vue.js·小程序·uni-app
wangdaoyin201025 分钟前
UniApp 在手机端(Android)打开选择文件和文件写入
android·前端·uni-app
用户4973573379831 分钟前
高端Web全栈工程师精品就业实战班课程 从零打造Web架构师
前端
我们没有完整的家38 分钟前
技术速递|Playwright MCP 调试 Web 应用时,GitHub Copilot 生成断言脚本的实用方法
前端·github·copilot
universe_0143 分钟前
前端学习之八股和算法
前端·学习
一川_1 小时前
ElementUI分页器page-size切换策略:从保持当前页到智能计算的优化实践
前端
敲敲了个代码1 小时前
[特殊字符] Web 字体裁剪优化实践:把 42MB 字体包瘦到 1.6MB
前端·javascript·学习·html·web