HoveringHeaderList ,支持多种header、item、separator混搭,支持按indexPath跳转(跳转到第x组第y个item)
已更新到XBScaffold中,有需要自取:https://www.jianshu.com/p/726c1e94df5b
源码:
思路:
关键在于确定分组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,
),