一、SingleChildScrollView和CustomScrollView + Sliver 对比
| 维度 | 方案一：SingleChildScrollView + shrinkWrap | 方案二：CustomScrollView + Sliver (推荐) |
|---|---|---|
| 核心原理 | 外层包裹一个可滚动容器，内部列表强制关闭滚动并计算全部高度。 | 使用专门的滚动视图，内部组件（Slivers）直接参与滚动渲染管线，按需加载。 |
| 代码复杂度 | ⭐ 低 结构简单，逻辑直观，新手友好。 | ⭐⭐⭐ 高 需要理解 Sliver、SliverDelegate 等概念，语法较繁琐。 |
| 性能表现 | ⚠️ 较差 (大数据量) 会一次性构建所有子组件。若列表有1000条数据，内存和CPU消耗巨大，首屏卡顿。 | ✅ 极佳 按需渲染 (Lazy Loading)。只渲染屏幕可见区域及少量预加载项，滑动极其流畅。 |
| 内存占用 | 🔴 高 所有列表项对象常驻内存。 | 🟢 低 不可见区域的组件会被销毁回收。 |
| 适用数据量 | 小数据量 (< 50~100 条) 如：设置页、个人详情页、简单的表单页。 | 中/大数据量 (> 100 条) 如：商品流、新闻Feed、聊天记录、无限滚动列表。 |
| 头部固定效果 | 自然实现。 头部Widget放在Column最上方即可，随页面滚动自然向上移出。 | 需配合 SliverAppBar (浮动/固定) 或 SliverToBoxAdapter 实现，配置灵活但复杂。 |
| 视差/特殊效果 | ❌ 难实现 难以做复杂的视差滚动（Parallax）或吸顶效果。 | ✅ 原生支持 SliverPersistentHeader 可轻松实现吸顶、渐变、视差等高级特效。 |
| 嵌套限制 | 容易遇到嵌套冲突，需严格配置 physics 和 shrinkWrap。 | 专为嵌套设计，本身就是为了解决嵌套滚动问题而生。 |
| 维护成本 | 低，代码易读，修改方便。 | 中/高，新人接手可能需要学习成本。 |
**SingleChildScrollView**一次性加载所有的数据，占用内存高，适用数据量小。
CustomScrollView 加载可视区域的组件，占用内存小，随着滑动，不可见区域的组件会被销毁回收。转为复杂嵌套而生。
| 如果你的页面... | 选择方案 |
|---|---|
| 数据量 < 50 条，且无复杂动画 | 方案一 (SingleChildScrollView) ✅ (简单快捷) |
| 数据量 > 100 条，或需要无限加载 | 方案二 (CustomScrollView) ✅ (性能必需) |
| 需要做“吸顶”、“视差”、“渐变隐藏”等特效 | 方案二 (CustomScrollView) ✅ (能力必需) |
| 团队新手多，追求快速迭代原型 | 方案一 (SingleChildScrollView) ✅ (易于维护) |
tips: SliverToBoxAdapter可将普通的Widget转换成Sliver 协议组件，使其可以在放入到CustomScrollView中。
二、常用的组件搭配表
| 场景分类 | 核心搭配组合 | 典型应用场景 | 关键要点/注意事项 |
|---|---|---|---|
| 1. 基础布局 | Scaffold + AppBar + Body | 所有标准页面的骨架 | Scaffold 提供 Material 设计语言的基础结构（抽屉、底部导航、浮动按钮等）。 |
Column / Row + Expanded / Flexible | 弹性布局，填满剩余空间 | 必须在 Flex (Column/Row) 中使用；Expanded = flex: 1 的 Flexible。 | |
Stack + Positioned | 绝对定位、图层叠加 | 用于在图片上覆盖文字、角标、悬浮按钮等。子组件默认对齐左上角。 | |
Container + Decoration | 带样式盒子（圆角、边框、渐变） | 避免过度嵌套 Container，简单样式可用 InkWell 或 DecoratedBox 替代。 | |
| 2. 列表与滚动 | SingleChildScrollView + Column | 少量内容的简单滚动页 | 仅限数据量少（<50条）。内部列表需设 shrinkWrap: true + NeverScrollableScrollPhysics。 |
CustomScrollView + SliverToBoxAdapter + SliverList/SliverGrid | 高性能混合滚动页（推荐） | 处理长列表、吸顶效果、视差滚动的标准方案。支持懒加载，性能最优。 | |
ListView.builder / GridView.builder | 单一类型的长列表/网格 | 必须使用 .builder 构造函数以实现懒加载；不要使用 ListView(children: []) 处理长数据。 | |
RefreshIndicator + ListView | 下拉刷新 | 包裹在 ListView 外部；需配合 async 回调实现刷新逻辑。 | |
| 3. 交互与反馈 | InkWell / GestureDetector + Container | 可点击区域、自定义按钮 | InkWell 有水波纹效果（需 Material 父级）；GestureDetector 无视觉反馈但功能更全（支持长按、拖拽）。 |
FutureBuilder / StreamBuilder + Widget | 异步数据加载、实时数据流 | 根据快照 (snapshot) 状态动态显示加载中、错误、空数据或内容。 | |
AnimatedContainer / AnimatedOpacity | 简单隐式动画 | 改变属性（大小、颜色、透明度）时自动过渡；无需手动控制动画控制器。 | |
SnackBar + ScaffoldMessenger | 底部提示消息 | Flutter 2.8+ 推荐使用 ScaffoldMessenger 而非 Scaffold.of(context).showSnackBar。 | |
| 4. 表单与输入 | Form + TextFormField + GlobalKey<FormState> | 表单验证、批量提交 | GlobalKey 用于触发 validate() 和 save()；validator 返回字符串表示错误信息。 |
TextField + InputDecoration | 单行/多行输入框 | InputDecoration 定制边框、提示语、图标、前缀后缀等。 | |
DropdownButton / Autocomplete | 下拉选择、自动补全 | DropdownButton 适合选项少；Autocomplete 适合大量数据搜索。 | |
| 5. 导航与路由 | Navigator.push / pop + MaterialPageRoute | 基础页面跳转 | 适用于简单应用；路由名称硬编码，维护性一般。 |
GoRouter / AutoRoute + ShellRoute | 声明式路由、深层链接、状态恢复 | 推荐方案。处理复杂导航栈、底部导航栏嵌套路由、Web URL 同步的最佳实践。 | |
BottomNavigationBar / NavigationRail | 底部/侧边标签导航 | 移动端用 BottomNavigationBar；平板/桌面端用 NavigationRail。常配合 PageView 或 IndexedStack 使用。 | |
| 6. 高级特效 | Hero + Image / Widget | 共享元素转场动画 | 两个页面的 Widget 设置相同的 tag，跳转时自动产生飞入/飞出效果。 |
Dismissible + ListTile | 滑动删除列表项 | 常用于待办事项、邮件列表；需处理 onDismissed 回调更新数据源。 | |
LayoutBuilder + Constraint | 响应式布局 | 根据父组件提供的约束动态决定子组件布局（如：宽屏显示三列，窄屏显示一列）。 | |
MediaQuery + LayoutBuilder | 适配不同屏幕尺寸 | 获取屏幕宽高、像素密度、系统字体缩放比例等。 | |
| 7. 状态管理搭配 | ChangeNotifierProvider + Consumer | 基础状态管理 (Provider) | 小中型应用首选；Consumer 用于局部刷新，避免 setState 全局刷新。 |
BlocBuilder / BlocListener + Cubit/Bloc | 复杂业务逻辑 (Bloc) | 适合大型应用；将 UI 与业务逻辑完全分离，状态变化可预测、可测试。 | |
GetX (Obx + GetxController) | 轻量级快速开发 | 集成路由、状态管理、依赖注入；代码量少但侵入性较强。 |
