Flutter SliverAppBar 吸顶效果

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

页面布局

  @override
  Widget 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 onInit
    scrollController = ScrollController()..addListener(_onScroll);

    super.onInit();
  }


  void _onScroll() {
   
    if (scrollController!.hasClients &&
        scrollController!.offset > kExpandedHeight - kToolbarHeight) {
      isAppBArPinned.value = true;
    } else {
      isAppBArPinned.value = false;
    }
  }

  @override
  void onClose() {
    // TODO: implement onClose
    super.onClose();
    scrollController!.dispose();
  }

最后呈现的效果

吸顶