HarmonyOS鸿蒙Next中List组件的sticky吸顶特性,在不使用ListItemGroup时能用吗?
HarmonyOS鸿蒙Next中List组件的sticky吸顶特性,在不使用ListItemGroup时能用吗? 是否必须结合ListItemGroup才会生效?
4 回复
List的sticky属性仅对ListItemGroup的header/footer生效。未使用ListItemGroup时,即使设置sticky属性也无吸顶效果。
参考demo
@Entry
@Component
struct Index {
dataArray: string[] =
["1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1"]
build() {
Column() {
// List组件结构
List({ space: 10 }) {
ListItemGroup({ header: this.HeaderBuilder() }) {
ForEach(this.dataArray, (item: string) => {
ListItem() {
Text(item).height(50)
}
})
}
}
.sticky(StickyStyle.Header) // 关键:启用header吸顶
}
//.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM]) // 安全区设置到父容器
.backgroundColor('blue')
.height('100%')
.width('100%')
}
// 定义吸顶Header组件
@Builder
HeaderBuilder() {
Text('吸顶标题')
.width('100%')
.backgroundColor(Color.White)
}
}
更多关于HarmonyOS鸿蒙Next中List组件的sticky吸顶特性,在不使用ListItemGroup时能用吗?的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
在API version 9之前,可以直接设置ListItem的sticky属性。
从API version 9开始,List组件推荐配合ListItemGroup组件使用stick属性,设置ListItemGroup中header是否要吸顶或footer是否要吸底。
在HarmonyOS鸿蒙Next中,List组件的sticky吸顶特性可以在不使用ListItemGroup时使用。该特性通过sticky属性控制,支持Header和Footer的吸顶效果。开发者只需在List组件中设置sticky属性为true即可实现滚动时的吸顶功能。此特性基于ArkTS/ArkUI实现,不依赖ListItemGroup。


