HarmonyOS鸿蒙Next中关于穿戴设备(手表)的滚动组件使用

HarmonyOS鸿蒙Next中关于穿戴设备(手表)的滚动组件使用

  1. 底部附带两类代码：一个是关于弧形滚动组件的使用，一个是关于表冠事件与滚动组件联动的使用
  2. 接下来说说注意事项：
    1. 当前时间是 2025.08.04，底部的两类代码是可以使用的 ide 相关信息: DevEco Studio 5.1.0 Release(构建版本：5.1.0.840，构建 2025年7月1日) sdk: 5.1.0(18) deviceTypes: [“wearable”]
    2. 想使用弧形滚动条，ArcScrollBar 需要与滚动组件同层级，同时要注意隐藏滚动组件的滚动条，不然就会显示两个滚动条
    3. 使用 ArcList 组件时要保证相关语法及结构(也可以说是使用方法)的正确性，因为当前时间，ArcList就算正确使用依然会报红：Only UI component syntax can be written here；但是代码是可以正常运行的
    4. 重点来了，表冠事件，这玩意卡了我好几天，为此我还提了一个工单，结果自己研究出来了；表冠事件的关键在于 .focusable(true).defaultFocus(true).focusOnTouch(true)
      • focusable(true): 设置当前组件是否可以获焦
      • focusOnTouch(true): 设置当前组件是否支持点击获焦能力。当组件未设置focusOnTouch时，组件默认不支持点击获焦能力
      • defaultFocus(true): 设置当前组件是否为当前层级页面上的默认焦点。当未设置defaultFocus时，组件默认不为当前层级页面的默认焦点。
      • 必须把这三个事件放在 ArcListItem 的子组件上面，不然联动不生效
    5. 不知道什么原因，Text 组件虽然设置了左对齐，但是并没有严格的对齐，可能是我的写法有问题
    6. 滚动组件与表冠事件联动后，不管是在顶部还是在底部，第一条或者最后一条数据会在屏幕剧中；list组件则并不会这样表现，会与顶部或底部对齐；
    7. 目前联动方面，只有 Text 组件才会产生效果，自定义组件或者 Column 组件并不会出现效果，其他组件有机会再去尝试 以上就是我的使用心得，如果有不对的地方还请指出。大家一起交流，共同进步。


```typescript
// 1.弧形滚动组件
import { ArcScrollBar } from '[@kit](/user/kit).ArkUI';
[@Component](/user/Component)
[@Entry](/user/Entry)
struct Index {
    private scroller: Scroller = new Scroller()
    build() {
        Column() {
            Stack({alignContent: Alignment.Center}) {
                Scroll(this.scroller) {
                    Text(`${"笑".repeat(1000)}`).textAlign(TextAlign.Start)
                }.padding({left: 16, right: 16, top: 8, bottom: 8}).borderRadius("50%").scrollBar(BarState.Off)
                ArcScrollBar({scroller: this.scroller, state: BarState.Auto})
            }
        }
    }
}

// 2.表冠事件与滚动组件联动
import { ArcScrollBar, ArcList, ArcListItem, ArcListItemAttribute, ArcListAttribute } from '[@kit](/user/kit).ArkUI';

[@Entry](/user/Entry)
[@Component](/user/Component)
struct Index {
  [@State](/user/State) message: string = 'Hello World';
  private scroller: Scroller = new Scroller()
  private orderList: number[] = [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]
  build() {
    Column() {
      Stack({alignContent: Alignment.Center}) {
        ArcList({scroller: this.scroller}) {
          ForEach(this.orderList, (item: number) => {
            ArcListItem() {
              Text(`${item}.${"笑".repeat(9)}`).textAlign(TextAlign.Start).focusable(true).defaultFocus(true).focusOnTouch(true)
            }.width('100%').autoScale(false)
          })
        }.width('100%')
        ArcScrollBar({scroller: this.scroller, state: BarState.Auto})
      }.borderRadius("50%").height('100%').width('100%')
    }.height('100%').width('100%')
  }
}

更多关于HarmonyOS鸿蒙Next中关于穿戴设备(手表)的滚动组件使用的实战教程也可以访问 https://www.itying.com/category-93-b0.html

回到顶部