当前位置：首页 > 移动端开发 > 正文内容

手把手教你华为鸿蒙开发之第九节

邻居的猫1个月前 (12-09)移动端开发687

华为鸿蒙开发：翻滚视图Scroller与ForEach循环深度解析

导言

在移动运用开发中，翻滚视图是展现很多内容的常用组件。华为鸿蒙操作系统供给了Scroller组件，答应开发者创立翻滚视图。本文将经过 DevEco Studio 具体介绍Scroller的根本运用、翻滚操控以及怎么结合ForEach循环动态生成翻滚内容。

Scroller根底

Scroller是鸿蒙运用中用于创立翻滚视图的组件，它支撑笔直和水平翻滚，以及自定义翻滚条等特性。

根本运用

示例1：根底Scroller翻滚视图

@Entry
@Component
struct Index {
  build() {
    Column() {
      Scroll() {
        Column({ space: 10 }) {
          ForEach(Array.from({ length: 5 }), (item: string, index) => {
            Text('项目' + (index + 1))
              .width('100%')
              .height(100)
              .textAlign(TextAlign.Center)
              .backgroundColor(Color.Red)
              .fontSize(20)
              .fontColor(Color.White)
              .borderRadius(10)
          })
        }
      }
      .padding(10)
      .width('100%')
      .height(300)
    }
  }
}

在这个示例中，咱们创立了一个包括5个项目的翻滚视图，每个项目都是一个简略的文本视图，布景色彩为赤色。

翻滚操控

示例2：增加翻滚条和翻滚操控

@Entry
@Component
struct Index {
  build() {
    Column() {
      Scroll() {
        Column({ space: 10 }) {
          ForEach(Array.from({ length: 10 }), (item: string, index) => {
            Text('项目' + (index + 1))
              .width('100%')
              .height(100)
              .textAlign(TextAlign.Center)
              .backgroundColor(Color.Blue)
              .fontSize(20)
              .fontColor(Color.White)
              .borderRadius(10)
          })
        }
        .padding(10)
        .width('100%')
      }
      .width('100%')
      .height(400)
      .scrollable(ScrollDirection.Vertical) // 设置翻滚方向
      .scrollBar(BarState.Auto) // 设置翻滚条显现战略
      .scrollBarColor(Color.Green) // 设置翻滚条色彩
      .scrollBarWidth(5) // 设置翻滚条宽度
      .edgeEffect(EdgeEffect.Spring) // 设置滑动作用
    }
  }
}

在这个示例中，咱们为Scroll组件增加了翻滚条，并设置了翻滚条的色彩、宽度和滑动作用。

翻滚事情

示例3：监听翻滚事情

@Entry
@Component
struct Index {
  myScroll: Scroller = new Scroller()

  build() {
    Column() {
      Scroll(this.myScroll) {
        Column({ space: 10 }) {
          ForEach(Array.from({ length: 10 }), (item: string, index) => {
            Text('项目' + (index + 1))
              .width('100%')
              .height(100)
              .textAlign(TextAlign.Center)
              .backgroundColor(Color.Green)
              .fontSize(20)
              .fontColor(Color.White)
              .borderRadius(10)
          })
        }
        .padding(10)
        .width('100%')
      }
      .width('100%')
      .height(400)
      .scrollable(ScrollDirection.Vertical)
      .scrollBar(BarState.Auto)
      .scrollBarColor(Color.Blue)
      .scrollBarWidth(5)
      .edgeEffect(EdgeEffect.Spring)
      .onScroll((x, y) => {
        console.log('现已滑动的间隔:', this.myScroll.currentOffset().yOffset)
      })
    }
  }
}

在这个示例中，咱们监听了翻滚事情，并在操控台输出当时翻滚的间隔。

翻滚操控按钮

示例4：操控翻滚条方位

@Entry
@Component
struct Index {
  myScroll: Scroller = new Scroller()

  build() {
    Column() {
      Scroll(this.myScroll) {
        Column({ space: 10 }) {
          ForEach(Array.from({ length: 10 }), (item: string, index) => {
            Text('项目' + (index + 1))
              .width('100%')
              .height(100)
              .textAlign(TextAlign.Center)
              .backgroundColor(Color.Purple)
              .fontSize(20)
              .fontColor(Color.White)
              .borderRadius(10)
          })
        }
        .padding(10)
        .width('100%')
      }
      .width('100%')
      .height(400)
      .scrollable(ScrollDirection.Vertical)
      .scrollBar(BarState.Auto)
      .scrollBarColor(Color.Blue)
      .scrollBarWidth(5)
      .edgeEffect(EdgeEffect.Spring)

      Button('翻滚到底部').margin(20)
        .onClick(() => {
          this.myScroll.scrollEdge(Edge.End)
        })
      Button('获取现已翻滚的间隔')
        .onClick(() => {
          const y = this.myScroll.currentOffset().yOffset
          AlertDialog.show({
            message: `y: ${y}`
          })
        })
    }
  }
}

在这个示例中，咱们增加了两个按钮，一个用于翻滚到底部，另一个用于显现当时翻滚的间隔。