[TOC] ## 概述 | Sliver 组件 | 作用描述 | 适用场景 | 是否常与 `SliverList` 一起使用 | | --- | --- | --- | --- | | **SliverList** | 构建线性列表 | 普通滚动列表、可按需加载 | ✅ 是核心组件 | | **SliverChildListDelegate** | 提供固定列表项 | 静态、少量数据 | ✅ 用于 SliverList | | **SliverChildBuilderDelegate** | 提供懒加载构建器 | 动态、大数据列表 | ✅ 用于 SliverList | | **SliverAppBar** | 可滚动/折叠的 AppBar | 页面头部展示、悬浮标题 | ✅ 常放在 SliverList 前面 | | **SliverToBoxAdapter** | 插入普通的非 Sliver Widget | 添加广告图、banner、按钮等普通 widget | ✅ 可放在 SliverList 前后 | | **SliverPadding** | 添加 Sliver 内容的内边距 | 分隔不同 sliver 块、添加间距 | ✅ 搭配 SliverList 美化 | | **SliverGrid** | 构建网格布局 | 照片、商品、宫格类展示 | ❌ 替代 SliverList 用于网格 | | **SliverFixedExtentList** | 固定高度的列表 | 比 SliverList 性能更高（子项高度一致时） | ✅ 高性能优化版 | | **SliverPrototypeExtentList** | 以 prototype 子项确定所有子项高度 | 可自定义子项高度标准 | ⚠️ 特殊需求时使用 | | **SliverFillRemaining** | 填满剩余滚动空间 | 底部空白填充、无数据页等 | ✅ 常与 SliverList 配合 | | **SliverFillViewport** | 每页填满整个 viewport | 分页滑动、引导页等 | ❌ 特殊场景 | | **SliverPersistentHeader** | 固定/吸顶的 header 区域 | 吸顶导航、分段标题栏 | ✅ 可与 SliverList 联合实现分段 | ## 使用 SliverChildListDelegate（适合静态少量数据） ``` CustomScrollView( slivers: [ SliverList( delegate: SliverChildListDelegate( [ // 一次性传入完整 widget 列表，适用于数据量少、固定不变 Container(height: 100, color: Colors.red), Container(height: 100, color: Colors.green), Container(height: 100, color: Colors.blue), ], ), ), ], ) ``` ## 使用 SliverChildBuilderDelegate（适合动态/懒加载） ``` CustomScrollView( slivers: [ SliverList( delegate: SliverChildBuilderDelegate( (BuildContext context, int index) { // 每次滚动到可视区域才会懒加载对应 index 的内容 return Container( height: 80, alignment: Alignment.center, color: index.isEven ? Colors.amber : Colors.cyan, child: Text('Item #$index', style: TextStyle(fontSize: 20)), ); }, childCount: 50, // 指定最大个数 ), ), ], ) ``` ## SliverAppBar — 可折叠的顶部栏 ``` CustomScrollView( slivers: [ SliverAppBar( pinned: true, // 滚动时是否固定在顶部 expandedHeight: 200.0, flexibleSpace: FlexibleSpaceBar( title: Text('Sliver AppBar'), background: Image.network( 'https://picsum.photos/400/200', fit: BoxFit.cover, ), ), ), // 下面可以接 SliverList ], ) ``` > 📝 可用于实现折叠的头图效果，是 sliver 页面中非常常用的组件之一。 ## SliverToBoxAdapter — 插入普通 Widget(按钮,广告) ``` CustomScrollView( slivers: [ SliverToBoxAdapter( child: Padding( padding: EdgeInsets.all(16), child: Text('我是普通的 Widget，不是 Sliver'), ), ), ], ) ``` > 📝 用来将普通 Widget 嵌入到 Sliver 系列中。比如：按钮、广告 Banner 等。 ## SliverPadding — 为 Sliver 添加边距 ``` CustomScrollView( slivers: [ SliverPadding( padding: EdgeInsets.symmetric(horizontal: 16), sliver: SliverList( delegate: SliverChildBuilderDelegate( (context, index) => ListTile(title: Text('Item $index')), childCount: 10, ), ), ), ], ) ``` ## SliverFixedExtentList — 高性能列表（固定高度） ``` CustomScrollView( slivers: [ SliverFixedExtentList( itemExtent: 80.0, // 每个子项固定高度 delegate: SliverChildBuilderDelegate( (context, index) => Container( alignment: Alignment.center, color: index.isEven ? Colors.teal[100] : Colors.teal[200], child: Text('Fixed Item $index'), ), childCount: 20, ), ), ], ) ``` > 📝 所有子项高度一致时，推荐使用这个代替 SliverList，性能更佳！ ## SliverFillRemaining — 占据剩余空间 ``` CustomScrollView( slivers: [ SliverList( delegate: SliverChildListDelegate( [Container(height: 100, color: Colors.orange)], ), ), SliverFillRemaining( hasScrollBody: false, // 无需滚动 child: Center( child: Text('没有更多内容啦~'), ), ), ], ) ``` 📝 常用于“无数据时的占位视图”或填满剩余空间的 footer。 ## SliverPersistentHeader — 固定/吸顶 Header ``` class MyHeaderDelegate extends SliverPersistentHeaderDelegate { @override Widget build(context, double shrinkOffset, bool overlapsContent) { return Container( color: Colors.blue, alignment: Alignment.center, child: Text('我是吸顶标题', style: TextStyle(color: Colors.white)), ); } @override double get maxExtent => 60; @override double get minExtent => 60; @override bool shouldRebuild(_) => false; } // 使用方式： CustomScrollView( slivers: [ SliverPersistentHeader( pinned: true, delegate: MyHeaderDelegate(), ), SliverList( delegate: SliverChildBuilderDelegate( (context, index) => ListTile(title: Text('Item $index')), childCount: 20, ), ), ], ) ``` > 📝 实现类似“吸顶导航栏”、“段落标题”的效果。 ## SliverGrid ``` CustomScrollView( slivers: [ SliverGrid( gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 3, // 一行 3 个 mainAxisSpacing: 10, crossAxisSpacing: 10, childAspectRatio: 1.0, // 宽高比 ), delegate: SliverChildBuilderDelegate( (context, index) { return Container( alignment: Alignment.center, color: Colors.primaries[index % Colors.primaries.length], child: Text('Item $index'), ); }, childCount: 12, ), ), ], ) ``` > 📝 用于构建网格形式展示的内容，例如商品卡片、图片集等。 ## SliverFillViewport — 类似 PageView 效果 ``` CustomScrollView( scrollDirection: Axis.horizontal, // 横向滚动 slivers: [ SliverFillViewport( viewportFraction: 0.8, // 每页占 80% 宽度 delegate: SliverChildBuilderDelegate( (context, index) { return Container( margin: EdgeInsets.all(8), color: Colors.teal[100 * (index % 9)], child: Center(child: Text('Page $index')), ); }, childCount: 5, ), ), ], ) ``` > 📝 用于构建横向滑动的全屏视图，可以做类似“卡片轮播图”的效果。 ## SliverList + SliverAnimatedList（插入/删除动画） ```LayoutBuilder( builder: (BuildContext context, BoxConstraints constraints) { if (constraints.maxWidth < 200) { // 最大宽度小于200，显示一张图片 return Image.network(""); } else { return Container(); } }, ), ``` > 📝 类似 LayoutBuilder，可以根据滚动位置做动态内容展示。