参考链接
How to add SliverAppBar to your Flutter app - LogRocket Blog
class MySliverAppBar extends SliverPersistentHeaderDelegate {
final double expandedHeight;
final String logo;
final String tageName;
MySliverAppBar(this.tageName, {required this.expandedHeight,required this.logo,});
@override
Widget build(
BuildContext context, double shrinkOffset, bool overlapsContent) {
return Stack(
clipBehavior: Clip.none,
fit: StackFit.expand,
children: [
Container(
width: Global.screenWidth,
height: 130,
decoration: BoxDecoration(
color: HexColor.fromHex("#3484FF"),
image:shrinkOffset<100? (logo == null || logo == ""
? DecorationImage(
image: AssetImage(
"images/ic_tag_detail_head_bg.png"),
fit: BoxFit.fill,
)
: DecorationImage(
image: NetworkImage(logo),
fit: BoxFit.fill,
)):null,
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Padding(
padding: EdgeInsets.only(left: 18, top: 30),
child: IconButton(
onPressed: () {
Navigator.pop(context);
},
icon: Icon(
Icons.arrow_back_ios,
color: Colors.white,
)),
),
Padding(
padding: EdgeInsets.only(right: 16, top: 30),
child: IconButton(
onPressed: () {},
icon: Icon(
Icons.share,
color: Colors.white,
)),
),
],
),
),
Center(
child: Opacity(
opacity: shrinkOffset / expandedHeight,
child: Container(
constraints: BoxConstraints(maxWidth: Global.screenWidth-60),
padding:EdgeInsets.only(top: 30),
child:Text(
tageName,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w100,
fontSize: 18,
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),),
),
),
Positioned(
bottom: -expandedHeight/2,
left: 14,
child: Opacity(
opacity: (1 - shrinkOffset / expandedHeight),
child: Image.asset(
"images/ic_tag_detail_tag.png",
width: 75,
height: 75,
),
),
),
],
);
}
@override
double get maxExtent => expandedHeight;
@override
double get minExtent => 80;
@override
bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) => true;
}