📚 Flutter 滚动组件总结
Flutter 中的滚动主要基于 Scrollable 和 Viewport 机制，常见的滚动组件大致可以分为以下几类：
一、单一方向滚动容器
1. SingleChildScrollView
- 用途：让单个子组件在一个方向上可以滚动。
- 作用/特点 ：
- 只能有 一个子组件。
- 常用于内容超出屏幕时的简单滚动（如长文本、表单）。
- 支持设置
scrollDirection（默认纵向）。
- 效果：当内容大于屏幕可视范围时，可以手指滑动滚动。
- 缺点：所有内容会一次性渲染，性能不适合大量子组件。
二、列表类滚动组件（多子元素）
2. ListView
- 用途：最常用的滚动列表组件。
- 作用/特点 ：
- 支持垂直/水平滚动。
- 支持四种构造方式：
children、builder、separated、custom。 - 默认会懒加载子项（builder/separated）。
- 效果：适合数据量较多的场景，如聊天列表、新闻流。
3. GridView
- 用途：网格布局的滚动组件。
- 作用/特点 ：
- 适合展示图片墙、商品列表。
- 支持
GridView.count（指定列数）、GridView.extent（指定最大宽度）、builder（懒加载）、custom。
- 效果 ：自动滚动的网格排列，性能类似
ListView。
4. CustomScrollView
- 用途：自定义滚动效果，支持组合不同的 Sliver。
- 作用/特点 ：
CustomScrollView内部由Sliver组成。- 可以把
SliverAppBar、SliverList、SliverGrid等组合在一起。 - 常用于复杂的滚动页面（如电商首页、微博首页）。
- 效果：支持吸顶 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