flutter 使用 CustomScrollView SliverAppBar SliverPersistentHeader 实现 头部下滑 吸顶作用

上面两个图一个下滑动sliveappbar展开后隐藏标题 显示内容  ，一个是上滑动sliveappbar收缩后，展示标题 
 主要代码 
 Scaffold(
        backgroundColor: CommonColors.grayBg,
        body: FutureBuilder<StoreNewDetailModel>(
            future: _futureStoreDetal,
            builder: (context, data) {
              if (data.hasData) {
// Column 和 Expanded 实现底部立即预约实现悬浮状态 
                return Column(
                  children: <Widget>[
                    Expanded(
// 滑动 折叠 最外层要是CustomScrollView 控件
                      child: CustomScrollView(
                        controller: _pageScrollController,
                        slivers: <Widget>[
                  //标题 内容  flexibleSpace 可折叠的内容区域 title 标贴  background 是一个可放入的控件 
                          SliverAppBar(
                            pinned: true,
                            floating: false, //appbar一直在顶部
                            expandedHeight: _sliverAppBarMaxHeight,
                            flexibleSpace: FlexibleSpaceBar(
                              centerTitle: true,
                              title: ValueListenableBuilder<bool>(
                                  valueListenable: _isShowTitle,
                                  builder: (context, data, child) {
                                    return Container(
                                      child: Text(
                                        _isShowTitle.value == true ? widget.storeInfo.storeName : "",
                                        style: TextStyle(color: Colors.white),
                                      ),
                                    );
                                  }),
                             /// 我这背景weight中就放入了 图片 店铺信息等 
                              background: Container(
                                color: Colors.white,
                                child: Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: <Widget>[
                                    _headImageWidget(),
                                    _stormNameWidget(),
                                    _myCarWidget(),
                                    _detailImfoWidget()
                                  ],
                                ),
                              ),
                            ),
                          ),
                          //头部吸顶 chile 我自定义一个横向的listviw item 是textview 例如 保养 洗美等
                          SliverPersistentHeader(
                            pinned: true,
                            delegate: _SliverAppBarDelegate(
                              minHeight: ScreenUtil().setHeight(50),
                              maxHeight: ScreenUtil().setHeight(50),
                              child: Container(
                                color: Colors.white,
                                child: Container(
                                  margin: EdgeInsets.only(left: 8),
                                  decoration: BoxDecoration(
                                      border: Border(bottom: BorderSide(color: Color(0xFFECECEC), width: 2))),
                                  //刷新tab
                                  child: ListView.builder(
                                      scrollDirection: Axis.horizontal,
                                      itemCount: _storeInfo.itemCategorys.length,
                                      itemBuilder: (context, index) {
                                        return _tabListWidget(_storeInfo.itemCategorys[index]);
                                      }),
                                ),
                              ),
                            ),
                          ),
                          SliverToBoxAdapter(
                            child: SizedBox(
                              height: 10,
                            ),
                          ),
                          //其他额外list列表组件 用这个控件（SliverFillRemaining给你控件的最高度是屏幕高度的最大致） 假如设置此listiew 禁止滑动 会出现问题 底部控件不足报错，假如不禁止listview 滑动 但是 和 CustomScrollView  滑动有冲突 ，推荐使用这个方法 
https://zhuanlan.zhihu.com/p/106197796?utm_source=wechat_session
// SliverFillRemaining具有listview 数量较小情况 也保证滑动到title 就不在滑动消失了  更好的体验
                          SliverFillRemaining(
                            child: ListView.builder(
                              padding: EdgeInsets.all(0),
                              physics: AlwaysScrollableScrollPhysics(),
                              itemCount: _storeInfo.itemCategorys.length,
                              controller: _shopCoordinator.newChildScrollController(),
                              itemBuilder: (context, firstIndex) => Column(
                                children: <Widget>[
                                  firstIndex != 0
                                      ? Container(
                                          height: ScreenUtil().setHeight(50),
                                          alignment: Alignment.center,
                                          child: Text(
                                            getServiceName(_storeInfo.itemCategorys[firstIndex]),
                                            style: TextStyle(
                                                fontSize: 17, color: Color(0xFF282828), fontWeight: FontWeight.w600),
                                          ),
                                        )
                                      : Container(),
                                  Column(
                                      children:
                                          _storeInfo.itemCategorys[firstIndex].itemInfos.map((ServiceInfoModel s) {
                                    return Container(
                                      child: _itemListFirstTitleWidget(s),
                                      alignment: Alignment.center,
                                      decoration: BoxDecoration(
                                          borderRadius: BorderRadius.all(Radius.circular(5)), color: Colors.white),
                                      margin: EdgeInsets.only(left: 10, right: 10, bottom: 10),
                                    );
                                  }).toList()),
                                ],
                              ),
                            ),
                          ),
//                          SliverToBoxAdapter(
//                            child: Container(height: _getSliverToBox1()),
//                          ),
                        ],
                      ),
                    ),
                    StoreDetailPaymentOrderPage(
                      storeNewDetailModel: _storeInfo,
                      storeListModel: widget.storeInfo,
                      vehicleCarModel: _vehicleCarModelNotifier.value,
                    ),
                  ],
                );
              } else {
                return loadingCellBox();
              }
            }));

 

详细 控件解析

https://www.jianshu.com/p/ca79eb54a356