使用 ArkUI 开发鸿蒙 HarmonyOS 原生应用界面交互 实现 Stepper 组件内部滚动浏览内容

在基于华为鸿蒙 HarmonyOS 的 ArkUI 搭建界面交互时，使用 Stepper 组件时，让其内部的内容在超出容器可视范围时，能够正常进行滚动浏览，可以使用 Scroll 可滚动的容器组件。

由于 Stepper 组件内部只允许嵌入 StepperItem 组件，所以我们要把 Scroll 放入 StepperItem 内部，下面给出代码示例：

@Entry
@Component
struct Content {
  scroller: Scroller = new Scroller()
  @State currentIndex: number = 0

  build() {
    Stepper({
      index: this.currentIndex
    }) {

      StepperItem() {
        Column() {
          Scroll(this.scroller) {
            Column() {
              Text('学习路径')
                .fontColor('#333333')
                .fontSize(36)
                .fontWeight(500)
                .margin({ top: 60, bottom: 40 })
              Text('　开发者可通过华为开发者官网的 HarmonyOS 学堂进行学习，这里提供了丰富的教学视频、图文教程，还可在线答题闯关，在线考试获取认证。')
                .width('100%')
                .fontSize(30)
                .fontColor(Color.Grey)
                .lineHeight(50)
                .margin({bottom: 180})
              Text('https://developer.huawei.com/')
                .width('100%')
                .fontSize(18)
                .fontColor(Color.Grey)
                .textAlign(TextAlign.Center)
                .margin({bottom: 10})
            }
          }
          .scrollable(ScrollDirection.Vertical)  // 滚动方向纵向
          .scrollBar(BarState.Auto) // 自动显示滚动条
          .scrollBarColor(Color.Gray)  // 滚动条颜色
        }
        .width(360)
        .height(700)
        .backgroundColor('#FFFFFF')
        .padding(15)
      }
      .nextLabel('下一页')
      .status(this.firstState)

    }
    .backgroundColor('#F1F3F5')
    .onChange((prevIndex: number, index: number) => {
      this.currentIndex = index
    })
  }
}

相关内容：

• No Related Posts