美文网首页
2022-07-06flutter自定义sliverappbar

2022-07-06flutter自定义sliverappbar

作者: 李新阳 | 来源:发表于2022-07-06 15:51 被阅读0次

参考链接
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;
}


Screenshot_20220706_154934.png

相关文章

网友评论

      本文标题:2022-07-06flutter自定义sliverappbar

      本文链接:https://www.haomeiwen.com/subject/awsybrtx.html