[Smart Watch] Single-frame Smart Watch Adapts Rotating Crown

Read the original article：[Smart Watch] Single-frame Smart Watch Adapts Rotating Crown

Problem:

1. Components with default interaction logic (Slider, Picker, List, ScrollBar, Swiper) require focus to respond to crown events. If these components are not properly configured, the crown interactions may not work as expected.
2. Components need to be adapted so that when the crown is rotated, the onDigitalCrown callback is triggered and processes the corresponding crown event.

Components with default interaction logic exist. For example, Slider, Picker, List, ScrollBar, Swiper. You only need the component to get focus first to receive the crown event.

Solution:

1. Default interaction logic:
   • Add the properties focusable(true), defaultFocus(true), and focusOnTouch(true) to the component.
   • This ensures the component can interact with the crown when it gains focus.
2. Processing crown events:
   • Use the onDigitalCrown function to handle crown interactions (e.g., angle, speed, action type).
   • Event details can be accessed using CrownEvent, and event.stopPropagation() can be used to stop event propagation.

Example:

@Entry
@Component
struct Index {
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

  build() {
    Column() {
      List({ space: 20, initialIndex: 0 }) {
        ForEach(this.arr, (item: number) => {
          ListItem() {
            Button('' + item)
              .width('100%').height(100).fontSize(16)
          }
          .onClick(()=>{})
        }, (item: string) => item)
      }
      .focusable(true)
      .defaultFocus(true)
      .focusOnTouch(true) //When the list component is focused, it can slide in response to the rotating crown control, all three are required.
      .width('90%')
      .height('100%')
    }
    .width('100%')
    .height('100%')
    .backgroundColor(0xDCDCDC)
    .padding({ top: 5 })
  }
}Copy codeCopy code

2.Other components are adapted. When the crown is twisted, the onDigitalCrown callback is triggered, and the corresponding crown event can be processed in the callback.

System Capability: SystemCapability.ArkUI.ArkUI.Full

Name	Type	Description
timestamp	number	Timestamp.
angularVelocity	number	Angular velocity, in degrees per second.
degree	number	Relative rotation angle, unit: degree, value range: [-360 360].
action	CrownAction	Crown action.
stopPropagation	() => void	Stop event bubbling.

@Entry
@Component
struct CityList {
  @State message: string = "onDigitalCrown";

  build() {
    Column() {
      Row(){
        Stack() {
          Text(this.message)
            .fontSize(20)
            .fontColor(Color.White)
            .backgroundColor("#262626")
            .textAlign(TextAlign.Center)
            .focusable(true)
            .focusOnTouch(true)
            .defaultFocus(true)
            .borderWidth(2)
            .width(223).height(223)
            .borderRadius(110)
            .onDigitalCrown((event: CrownEvent) => {
              event.stopPropagation();
              this.message = "CrownEvent\n\n" + JSON.stringify(event);
              console.debug("action:%d, angularVelocity:%f, degree:%f, timestamp:%f",
                event.action, event.angularVelocity, event.degree, event.timestamp);
            })
        }.width("100%").height("100%")
      }.width("100%").height("100%")
    }
  }
}

Written by Merve Yonetci