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

The旺

发布于 2024-12-3 14:24

3175浏览

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)
    }
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.

在这个示例中，我们创建了一个包含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) // 设置滑动效果
    }
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.

在这个示例中，我们为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)
      })
    }
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.

在这个示例中，我们监听了滚动事件，并在控制台输出当前滚动的距离。

滚动控制按钮

示例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}`
          })
        })
    }
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.

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

结语

通过本文的详细介绍和示例，你应该能够掌握Scroller组件的基本使用、滚动控制以及如何结合ForEach循环动态生成滚动内容。这些技能对于开发具有丰富滚动内容的鸿蒙应用至关重要。如果你有任何问题或想要进一步讨论，欢迎在评论区留下你的想法。

以上就是一篇关于华为鸿蒙开发中Scroller组件的详细教程。希望这篇文章能帮助你更好地理解和使用华为鸿蒙开发中的Scroller组件。如果你在使用 DevEco Studio 进行开发时遇到任何问题，欢迎交流讨论。

分类

标签

51CTO

51CTO博客

51CTO学堂

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

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

引言

Scroller基础

基本使用

示例1：基础Scroller滚动视图

滚动控制

示例2：添加滚动条和滚动控制

滚动事件

示例3：监听滚动事件

滚动控制按钮

示例4：控制滚动条位置

结语

目录

订阅鸿蒙技术特刊，精选内容抢先看

51CTO

51CTO博客

51CTO学堂

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

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

引言

Scroller基础

基本使用

示例1：基础Scroller滚动视图

滚动控制

示例2：添加滚动条和滚动控制

滚动事件

示例3：监听滚动事件

滚动控制按钮

示例4：控制滚动条位置

结语

目录

订阅鸿蒙技术特刊，精选内容抢先看

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