鸿蒙Next中scroller组件的使用方法

在鸿蒙Next中，如何使用scroller组件实现页面滚动效果？能否提供一个简单的代码示例，说明如何设置滚动方向、滚动边界以及监听滚动事件？此外，scroller组件和list组件在功能上有哪些区别，分别适用于哪些场景？

2 回复

鸿蒙Next的Scroller组件？简单说就是“让页面滑起来”！
用法：在ArkUI里用<Scroller>包住内容，设置滚动方向（horizontal或vertical），再绑个滑动手势就行。
记住：别让它滑出你的幽默感！

更多关于鸿蒙Next中scroller组件的使用方法的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next（HarmonyOS NEXT）中，Scroller 组件用于实现可滚动的容器，支持水平和垂直方向的滚动。以下是基本使用方法及示例代码：

主要属性

  • scrollable：滚动方向（ScrollAxis.VERTICAL 或 ScrollAxis.HORIZONTAL）
  • maxCount：最大子组件数量（可选）
  • 支持通用属性如布局、边距等

示例代码（垂直滚动）

import { Scroller, ScrollAxis } from '@kit.ArkUI';

@Entry
@Component
struct ScrollerExample {
  build() {
    Column() {
      Scroller({ scrollable: ScrollAxis.VERTICAL }) {
        Column() {
          ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9, 10], (item: number) => {
            Text(`Item ${item}`)
              .fontSize(20)
              .width('100%')
              .height(80)
              .textAlign(TextAlign.Center)
              .backgroundColor(0xAFEEEE)
              .margin(5)
          })
        }
      }
      .width('100%')
      .height(300)
      .backgroundColor(0xF5F5F5)
    }
    .width('100%')
    .height('100%')
    .padding(10)
  }
}

关键说明

  1. 滚动方向：通过 scrollable 属性设置，支持垂直（默认）或水平滚动。
  2. 内容布局：在 Scroller 内部使用布局容器（如 Column 或 Row）组织子组件。
  3. 性能优化：对于长列表，建议结合 LazyForEach 实现延迟加载。

注意事项

  • 确保 Scroller 有明确的高度或宽度约束，否则可能无法正常滚动。
  • 水平滚动时，内部容器需设置为横向布局（如 Row）。

以上代码创建了一个垂直滚动的容器，包含10个文本项。可根据实际需求调整样式和内容。

回到顶部