重识 Flutter — 探索 Slivers 的奇妙世界（综合实例）

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(  child: Padding(    padding: EdgeInsets.symmetric(horizontal: 20),    child: Column(      crossAxisAlignment: CrossAxisAlignment.start,      children: [        Text(          '意大利面拌42号混凝土',          style: Theme.of(context).textTheme.titleMedium,        ),        ...      ],    ),  ),),

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;}

@overrideWidget 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(    ...  );}

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), ))
//CoverPhotoContainer(  ...  decoration: BoxDecoration(      borderRadius: BorderRadius.circular(12),      image: DecorationImage(        ...        fit: BoxFit.cover,      )),)

@overridevoid 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(    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(),          )        ],      ),  ))