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

源码:

HoveringHeaderList

思路:

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

架构:

demo:

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

属性说明:

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,
      ),

发表评论

电子邮件地址不会被公开。 必填项已用*标注