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

The旺

发布于 2024-12-3 14:24

浏览

0收藏

华为鸿蒙开发：滚动视图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}`
          })
        })
    }
  }
}

在这个示例中，我们添加了两个按钮，一个用于滚动到底部，另一个用于显示当前滚动的距离。