HarmonyOS鸿蒙Next中scroll组件如何让里面的控件从上往下排列

HarmonyOS鸿蒙Next中scroll组件如何让里面的控件从上往下排列 目前使用了 scroll 组件，但是里面控件是在中间。如果让控件从上往下排列呢？

3 回复

您可以使用Stack，堆叠容器，参考链接： https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-stack-V5

参考如下demo:

@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)
  }
}

更多关于HarmonyOS鸿蒙Next中scroll组件如何让里面的控件从上往下排列的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，scroll组件默认是垂直滚动的，里面的控件会从上往下排列。你只需要将控件添加到scroll组件中即可。例如：

在HarmonyOS鸿蒙Next中，scroll组件默认是垂直滚动的，里面的控件会从上往下排列。你只需要将控件添加到scroll组件中即可。例如：

在这个例子中，DirectionalLayout的orientation属性设置为vertical，确保控件从上往下排列。ScrollView会自动处理滚动行为。

  • 控件1
  • 控件2
  • 控件3

在HarmonyOS鸿蒙Next中，使用Scroll组件时，可以通过设置Direction属性为Axis.Vertical来实现内容从上往下排列。例如：

Scroll() {
  Column() {
    // 添加子控件
  }
  .width('100%')
  .alignItems(HorizontalAlign.Start)
}
.direction(Axis.Vertical)
.width('100%')
.height('100%')

Column组件默认垂直排列子控件，结合Scroll的垂直滚动方向，即可实现内容从上到下排列并支持滚动。

回到顶部