可以使用Stack,堆叠容器,参考链接: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-stack-V5// xxx.ets import { curves } from '@kit.ArkUI' @Entry @Component struct ScrollExample { scroller: Scroller = new Scroller() private arr: number[] = [0, 1,] build() { Stack({ alignContent: Alignment.TopStart }) { Scroll(this.scroller) { Column() { ForEach(this.arr, (item: number) => { Text(item.toString()) .width('90%') .height(150) .backgroundColor(0xFFFFFF) .borderRadius(15) .fontSize(16) .textAlign(TextAlign.Center) .margin({ top: 10 }) }, (item: string) => item) }.width('100%') } .scrollable(ScrollDirection.Vertical) // 滚动方向纵向 .scrollBar(BarState.On) // 滚动条常驻显示 .scrollBarColor(Color.Gray) // 滚动条颜色 .scrollBarWidth(10) // 滚动条宽度 .friction(0.6) .edgeEffect(EdgeEffect.None) .onWillScroll((xOffset: number, yOffset: number, scrollState: ScrollState) => { console.info(xOffset + ' ' + yOffset) }) .onScrollEdge((side: Edge) => { console.info('To the edge') }) .onScrollStop(() => { console.info('Scroll Stop') }) }.width('100%').height('100%').backgroundColor(0xDCDCDC) } }
可以使用Stack,堆叠容器,参考链接: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-stack-V5