Flutter SliverAppBar 吸顶效果

吸顶是常见的布局，主要使用的是CustomScrollView 和SliverApp组件实现的

页面布局

  @overrideWidget build(BuildContext context) {return CustomScrollView(controller: controller.scrollController!,physics: const BouncingScrollPhysics(),slivers: [SliverAppBar(backgroundColor: Colors.blue,iconTheme: const IconThemeData(color: Colors.white),expandedHeight: controller.kExpandedHeight,floating: false,pinned: true,stretch: false,snap: false,stretchTriggerOffset: ScreenHelper.height(100),onStretchTrigger: () async {return;},flexibleSpace: FlexibleSpaceBar(centerTitle: true,title: Obx(() => Text(controller.isAppBArPinned.value ? "体重检测" : "",style: TextStyle(color: Colors.white, fontSize: ScreenHelper.sp(16)),)),collapseMode: CollapseMode.parallax,stretchModes: [StretchMode.zoomBackground,StretchMode.fadeTitle,StretchMode.blurBackground,],background: Container(color: Colors.blue,child: Column(mainAxisAlignment: MainAxisAlignment.start,children: [SizedBox(height: ScreenHelper.topSafeHeight + 18),Text("2021年12月30日 13:00",style: TextStyle(color: Colors.white.withOpacity(.8)),),SizedBox(height: ScreenHelper.height(30)),Row(mainAxisAlignment: MainAxisAlignment.center,crossAxisAlignment: CrossAxisAlignment.end,children: [Text("52.0",style: TextStyle(color: Colors.white,fontSize: ScreenHelper.sp(40),fontWeight: FontWeight.bold),),Text("kg",style: TextStyle(color: Colors.white, fontSize: ScreenHelper.sp(13)),)],),SizedBox(height: ScreenHelper.height(5),),Text("BMI 20.7 标准",style: TextStyle(color: Colors.white.withOpacity(.8),fontSize: ScreenHelper.sp(14)),),SizedBox(height: ScreenHelper.height(15),),Container(padding: EdgeInsets.symmetric(horizontal: 6, vertical: 4),decoration: BoxDecoration(color: Colors.yellow,borderRadius: BorderRadius.circular(50)),child: Text("记录体重",style: TextStyle(color: Colors.white, fontSize: ScreenHelper.sp(14)),),)],),),),),SliverFixedExtentList(delegate: SliverChildBuilderDelegate((context, index) => ListTile(title: Text("测试",style: TextStyle(color: AppTheme.dartTextColor),),),childCount: 30),itemExtent: 50.0,),],);}

因为使用的getx状态管理，所以数据的操作都在getx里

GetxController 

 ScrollController? scrollController;final isAppBArPinned = false.obs; //判断APPbar是否吸顶double kExpandedHeight = ScreenHelper.width(240);void onInit() {// TODO: implement onInitscrollController = ScrollController()..addListener(_onScroll);super.onInit();}void _onScroll() {if (scrollController!.hasClients &&scrollController!.offset > kExpandedHeight - kToolbarHeight) {isAppBArPinned.value = true;} else {isAppBArPinned.value = false;}}@overridevoid onClose() {// TODO: implement onClosesuper.onClose();scrollController!.dispose();}

最后呈现的效果

吸顶