前言
在前三篇文章中，从为什么要使用Sliver，再根据使用频率逐个解析Slivers系列的组件。相信您已经入门了Sliver的世界。为了更好的将Slivers相关的组件结合起来使用，本文将通过一个综合的案例来帮助你理解。
源代码：https://www.aliyundrive.com/s/mPCDFwRv4Rm
效果图
话不多说，先上效果图，有图有真相！
页面框架搭建
顶部
SliverAppBar(
//指定状态栏（status bar）的亮度为暗色
systemOverlayStyle:
const SystemUiOverlayStyle(statusBarBrightness: Brightness.dark),
expandedHeight: 275.0,
backgroundColor: Colors.white,
elevation: 0.0,
pinned: true,
stretch: true,
flexibleSpace: FlexibleSpaceBar(
background: Image.asset(
'assets/images/back_image.png',
fit: BoxFit.cover,
),
stretchModes: const [
StretchMode.blurBackground,
StretchMode.zoomBackground,
],
),
leadingWidth: 80.0,
//裁剪为圆角矩形
leading: ClipRRect(
borderRadius: BorderRadius.circular(56.0),
//模糊滤镜
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 3.0, sigmaY: 3.0),
child: Container(
height: 56.0,
width: 56.0,
alignment: Alignment.center,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.white.withOpacity(0.20),
),
child: SvgPicture.asset('assets/images/icon/arrow-ios-back-outline.svg'),
),
),
),
);
底部装饰
bottom: PreferredSize(
preferredSize: const Size.fromHeight(0.0),
child: Container(
height: 32.0,
alignment: Alignment.center,
decoration: const BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(32.0),
topRight: Radius.circular(32.0),
),
),
child: Container(
width: 40.0,
height: 5.0,
decoration: BoxDecoration(
color: kOutlineColor,
borderRadius: BorderRadius.circular(100.0),
),
),
),
),
使用SliverToBoxAdapter来使用基于Box协议的组件
SliverToBoxAdapter(
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'意大利面拌42号混凝土',
style: Theme.of(context).textTheme.titleMedium,
),
...
],
),
),
),
通过SliverPersistentHeader制作菜品展示区域
class Menu extends SliverPersistentHeaderDelegate {
...
@override
Widget build(
BuildContext context, double shrinkOffset, bool overlapsContent) {
...
return Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
...
Text(
'菜品展示',
style: Theme.of(context).textTheme.titleMedium,
),
Expanded(
child: Stack(
children: [
//控制层叠关系
if (percent > uploadlimit) ...[
card,
bottomsliverbar
] else ...[
bottomsliverbar,
card
]
],
),
),
],
),
);
}
@override
double get maxExtent => maxExtended;
@override
double get minExtent => minExtended;
@override
bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) =>
false;
}
反转叠加动画通过Stack结合Transform实现
@override
Widget build(
BuildContext context, double shrinkOffset, bool overlapsContent) {
//shrinkOffset为SliverPersistentHeader滚动偏移量，用于对应图片的偏移程度
final percent = shrinkOffset / 180;
//限制图片偏移的触发范围
final uploadlimit = 13 / 120;
//使用clamp限制范围
final valueback = (1 - percent - 0.77).clamp(0, uploadlimit);
//将percent的值取平方，用于菜品展示图片下方背景块的位置偏移
final fixrotation = pow(percent, 1.5);
//背景
final bottomsliverbar = _CustomBottomSliverBar(
size: size, fixrotation: fixrotation, percent: percent);
//菜品图片
final card = _CoverCard(
valueback: valueback,
size: size,
percent: percent,
uploadlimit: uploadlimit);
return Container(
...
);
}
图片变换的布局
使用 Matrix4.identity()..rotateZ(...)实现绕 Z 轴的旋转变换。
Positioned(
top: size.height * 0.005,
left: size.width / 24,
child: Transform(
alignment: Alignment.topRight,
transform: Matrix4.identity()
..rotateZ(percent > uploadlimit
? (valueback * angleForCard)
: percent * angleForCard),
child: CoverPhoto(size: size),
))
//CoverPhoto
Container(
...
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12),
image: DecorationImage(
...
fit: BoxFit.cover,
)),
)
图片不规则背景+修复动画
背景块通过CustomPainter进行绘制
@override
void paint(Canvas canvas, Size size) {
final paint = Paint();
paint.color = backgroundcolor;
paint.style = PaintingStyle.fill;
paint.strokeWidth = 10;
final path = Path();
path.moveTo(0, size.height);
path.lineTo(size.width, size.height);
path.lineTo(size.width, 0);
path.lineTo(size.width * 0.27, 0);
canvas.drawPath(path, paint);
}
修复动画通过Positioned的left做出视觉上的一个视差
Positioned(
right: 0,
bottom: 0,
left: -size.width * fixrotation.clamp(0, 0.35),
child: Container(
height: size.height * 0.12,
child: Stack(
fit: StackFit.expand,
children: [
CustomPaint(
painter: CutRectangle(),
)
],
),
))
剩余部分
剩余部分都是通过SliverToBoxAdapter来进行实现，具体布局的内容不是本文的重点，就不过多阐述了，详见源代码。
总结
至此，三篇组件分解文章+一篇综合实战文章，我们学习了Sliver的使用和特性，相信您已经进入了Sliver的世界。我所写的也只是它魅力的冰山一角，Sliver系列组件是用于创建灵活的滚动界面和复杂布局的关键，那么请继续探索Sliver的世界，利用其强大的特性和灵活的组合方式，创建出更加有趣和具有交互性的滚动界面吧~（后续还会有更多的使用教程、源码分解...）
![[Flutter]足够入门的Dart语言系列之面向对象：类的定义详解、成员和实例使用](https://ucc.alicdn.com/pic/developer-ecology/baac3683408e4ab1b0774062ea73dbe7.png?x-oss-process=image/resize,h_160,m_lfit)
