美文网首页FlutterFlutterFlutter圈子
flutter实现ListView分组头部悬浮,支持混搭多种he

flutter实现ListView分组头部悬浮,支持混搭多种he

作者: huisedediao | 来源:发表于2020-09-19 17:23 被阅读0次

已封装 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,
      ),

相关文章

网友评论

    本文标题:flutter实现ListView分组头部悬浮,支持混搭多种he

    本文链接:https://www.haomeiwen.com/subject/eoweyktx.html