#鸿蒙通关秘籍#如何使用List组件实现滚动过程中覆盖导航条效果?

HarmonyOS
2天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
WAN梦幻编织者

通过设置expandSafeArea属性,可以使List组件的视窗范围延伸至导航条。这样在滚动过程中,ListItems可以覆盖导航条,实现预期的视觉效果。

typescript @Entry @Component struct ListExample { private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

build() { Column() { List({ space: 20, initialIndex: 0 }) { ForEach(this.arr, (item: number) => { ListItem() { Text('' + item).width('100%').height(100).fontSize(16).textAlign(TextAlign.Center) } }, (item: string) => item) } .listDirection(Axis.Vertical) .scrollBar(BarState.Off) .divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) .edgeEffect(EdgeEffect.Spring) .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM]) } .width('100%') .height('100%') } }

分享
微博
QQ
微信
回复
2天前
相关问题
如何获取List组件滚动滚动的距离
2547浏览 • 1回复 待解决
HarmonyOS 底部导航条沉浸式方案
267浏览 • 1回复 待解决
未适配底部导航条,会出现遮挡情况
1959浏览 • 1回复 待解决