flutter 实现ListView分组头部悬浮，支持混搭多种header、item、separator，支持indexPath跳转

HoveringHeaderList ，支持多种header、item、separator混搭，支持按indexPath跳转（跳转到第x组第y个item）

源码：

HoveringHeaderList

思路：

关键在于确定分组header的显示区域与ScrollView对应的offset区间。
关于实现分组header悬停效果可以看我这篇文章：
flutter实现ListView头部悬浮，item多种高度

效果：

QQ20200919-225105.gif

IMG_BF941B622A85-1.jpeg

架构：

2020-09-19 17.19.49.png

demo：

下载源码后拷贝到你的工程里，push到下图指向的页面即可

image.png

属性说明：

      HoveringHeaderList(
        key: _globalKey,

        ///分组信息，每组有几个item
        itemCounts: List.generate(5, (index) => 5),

        ///header builder
        sectionHeaderBuild: (ctx, section) {
          return Header(
            "我是段头 $section",
            color: Colors.orange,
          );
        },

        ///header高度
        headerHeightForSection: (section) {
          return Header.height;
        },

        ///item builder
        itemBuilder: (ctx, indexPath, height) {
          if (indexPath.index % 2 == 0) {
            return CellOne("我是第一种cell $indexPath", () {
              _globalKey.currentState.animateToIndexPath(SectionIndexPath(2, 3),
                  duration: Duration(seconds: 1), curve: Curves.ease);
            });
          } else {
            return CellTwo("我是第二种cell $indexPath", () {
              _globalKey.currentState.animateToIndexPath(SectionIndexPath(3, 2),
                  duration: Duration(seconds: 1), curve: Curves.ease);
            });
          }
        },

        ///item高度
        itemHeightForIndexPath: (indexPath) {
          if (indexPath.index % 2 == 0) {
            return CellOne.height;
          } else {
            return CellTwo.height;
          }
        },

        ///分割线builder
        separatorBuilder: (ctx, indexPath, height, isLast) {
//        print("indexPath : $indexPath,$isLast");
          return Separator();
        },

        ///分割线高度
        separatorHeightForIndexPath: (indexPath, isLast) {
          return Separator.height;
        },

        ///滚动到底部和离开底部的回调
        onEndChanged: (end) {
          print("end : $end");
        },

        ///offset改变回调
        offsetChanged: (offset) {
//        print("111111:offset : $offset");
        },

        ///滚动到顶部和离开顶部的回调
        onTopChanged: (top) {
          print("top:$top");
        },

        ///是否需要悬停header
        hover: true,
      ),