flutter 仿淘宝推荐二级分类效果

先看效果

一开始 用的PageView 做的， 然后重写PageScrollPhysics一顿魔改， 最后发现还是有一些小bug。 后面又想到pageview 能做，listview肯定也能做，最后用ListView加GridView 把功能实现了。

listview 实现pageview 的分页滑动效果只需要给ListView设置 physics: const PageScrollPhysics()。

做一个功能最重要的是拆分。

1:第一页最多展示5个半，（其实那半个是第二页的一部分）第二页后最多展示 15个

2:高度随着滑动动态变化

高度变化很简单只要最外层的widget 高度是动态的就行

Container(
                    height: state.height, // 动态变化
                    decoration: const BoxDecoration(
                      color: Colors.white,
                      // borderRadius:
                      //     BorderRadius.only(bottomLeft: Radius.circular(8), bottomRight: Radius.circular(8)),
                    ),
                    child: _buildSubcategory(context),
                  )

_buildSubcategory 这里主要有一些数学计算，因为数据多少是不确定的，第一页只显示五个，默认第二页最多显示15个，后面第三页等等都是默认最多显示15个，当然子分类可能没那么多，基本就两页，但是公式可以通用，想分几页就几页，能支持就支持呗。

 /// 构建子分类
  Widget _buildSubcategory(BuildContext context) => Stack(
        children: <Widget>[
          SizedBox(
            width: ScreenUtil.width,
            child:  ListView.builder(
              key: ValueKey("ListView$id"),
              addAutomaticKeepAlives: true,
              padding: EdgeInsets.zero,
              scrollDirection: Axis.horizontal,
              physics:  const PageScrollPhysics(),
              // physics: const NoInertiaScrollPhysics(),
              itemCount: state.listSubcategoryEntity.length < 6
                  ? 1
                  : ((state.listSubcategoryEntity.length - 5) / 15).ceil() + 1,
              controller: controller.scrollController,
              itemBuilder: (context, index) {
                List<SubcategoryEntity> list = [];
                if (index == 0) {
                  if(state.listSubcategoryEntity.length>5){
                    list.addAll(state.listSubcategoryEntity.sublist(0, 5));
                  }else{
                    list.addAll(state.listSubcategoryEntity);
                  }
                } else {
                  list.addAll(state.listSubcategoryEntity.sublist(
                      5 + (index - 1) * 15,
                      state.listSubcategoryEntity.length > (5 + index * 15)
                          ? 5 + index * 15
                          : state.listSubcategoryEntity.length));
                }
                return _buildSubcategoryWidget(context, index, list);
              },),
          ),
          Align(
            alignment: Alignment.bottomCenter,
            child: widgetBuilder(
              id: DemandListPageWidgetId.subcategoryIndicator,
              builder: () => _buildSubcategoryIndicatorWidget(
                  state.listSubcategoryEntity.length < 6
                      ? 1
                      : ((state.listSubcategoryEntity.length - 5) / 15).ceil() +
                          1,
                  state.index),
            ),
          )
        ],
      );

至于第一页怎么漏出第二页的数据，很简单 把第一页的width宽度设置小一点就能漏出第二页。

为什么是ScreenUtil.width-40？你想减多少都可以。。。我只是觉得减40漏出的部分更好看一些。

 _buildSubcategoryWidget(
      BuildContext context, int indexs, List<SubcategoryEntity> list) {
    return SizedBox(
      width:  state.listSubcategoryEntity.length >5&&indexs==0?ScreenUtil.width-40:ScreenUtil.width,
      child: GridView.builder(
        key: ValueKey("GridView$id"),
        physics: const NeverScrollableScrollPhysics(),
        shrinkWrap: true,
        padding:
        state.listSubcategoryEntity.length >5&&indexs==0?const EdgeInsets.only(left: 10 , top: 8):
        const EdgeInsets.only(left: 0, top: 8),
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 5,
          // crossAxisSpacing: 5,
          childAspectRatio:1.1,
          // mainAxisSpacing: 2
        ),
        itemBuilder: (BuildContext context, int index) {
          return Ripple(
              onTap: () {
                controller.push(url: list[index].jumpUrl ?? "");
              },
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  ImageBuild.network(list[index].image?.small ?? '',
                      fit: BoxFit.fill,
                      size: const Size(35, 35),
                      placeholder: AppImage.commonPlaceholderIconSmall),
                  const SizedBox(
                    height: 2.0,
                  ),
                  TextBuild.text(
                    list[index].title?.content ?? "",
                    style: AppTextStyleData( 
                      fontWeight: AppTextStyle.regular,
                      fontSize: 14,
                      color: AppColorData.hex(
                          list[index].title?.fontColor ?? "#1E1E1E"),
                    ),
                    textAlign: TextAlign.center,
                  ),
                ],
              ));
        },
        itemCount: indexs == 0
            ? (state.listSubcategoryEntity.length < 5
            ? state.listSubcategoryEntity.length
            : 5)
            : (state.listSubcategoryEntity.length > 5 + indexs * 15
            ? 15
            : (state.listSubcategoryEntity.length - (5 + (indexs - 1) * 15))),
      ),
    );
  }

主要是监听滑动事件，然后动态改变高度

NotificationListener<ScrollNotification>(
        onNotification: (ScrollNotification sn) {
     if (sn.metrics.axis == Axis.horizontal) {
            if (sn is ScrollEndNotification) {
               // var currentPage = (math.max(0.0, clampDouble(sn.metrics.pixels, sn.metrics.minScrollExtent, sn.metrics.maxScrollExtent)) /
               //     math.max(1.0, ScreenUtil.width)).round();
               // state.index = currentPage;
               // controller.widgetRebuild(DemandListPageWidgetId.subcategoryIndicator);
            } else {
              double progress = sn.metrics.pixels;
              if (0 < progress && progress <= ScreenUtil.width) {
                var multiple = state.listSubcategoryEntity.length>15 ? 1:0;
                if(state.listSubcategoryEntity.length<11){
                  state.height = 80;
                }else{
                  state.height =  progress/ScreenUtil.width * ((multiple+1)*78)+80;
                }
              } else if (progress == 0) {
                state.height = 80;
              }
              var currentPage = (math.max(0.0, clampDouble(sn.metrics.pixels, sn.metrics.minScrollExtent, sn.metrics.maxScrollExtent)) /
                  math.max(1.0, ScreenUtil.width)).round();
              state.index = currentPage; // 记录当前页数
              controller.widgetRebuild(DemandListPageWidgetId.subcategory); //刷新页面，自行替换
            }
          }
          return false;
        },
        child:    child );