已封装 HoveringHeaderList 。支持多种header、item、separator混搭,支持按indexPath跳转(跳转到第x组第y个item)
源码:
思路:
关键在于确定分组header的显示区域与ScrollView对应的offset区间。
关于实现分组header悬停效果可以看我这篇文章:
flutter实现ListView头部悬浮,item多种高度
效果:
QQ20200919-225105.gif IMG_BF941B622A85-1.jpeg架构:
2020-09-19 17.19.49.pngdemo:
下载源码后拷贝到你的工程里,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,
),
网友评论