Rotating crown with Image component inside ArcList takes effect, but rotating crown with custom component does not take effect?

#harmonyos #arclist #digitalcrown #focusable

Read the original article：Rotating crown with Image component inside ArcList takes effect, but rotating crown with custom component does not take effect?

Problem Description

Background Knowledge

focusable : Sets whether the component is focusable.

Solution

Rotating the crown does not take effect because the image in the custom component is not in focus. Directly use the Image component takes effect because the onClick event is set to be in the focus state. Set focusable to true for Image in the custom component to solve this issue.

import { ComponentContent, LengthMetrics } from "@kit.ArkUI";
import { UIContext, CircleShape } from '@kit.ArkUI';
import { ArcList, ArcListItem, ArcListAttribute } from '@kit.ArkUI';
import { RadioStation } from "./RadioStation";

@Builder
function buildText() {
  Column() {
    Text("header")
      .fontSize('60px')
      .fontWeight(FontWeight.Bold)
      .fontColor(Color.Black)
  }.margin(0)
}

@Component
export struct ImageLoader {
  @Prop imageUrl: string
  @Prop fallbackImageUrl: Resource
  @Prop objectFit: ImageFit = ImageFit.Auto
  @Prop cornerRadius: number = 0

  @State isError: boolean = false

  build() {
    if (!this.isError) {
      Image(this.imageUrl)
        .objectFit(this.objectFit)
        .borderRadius(this.cornerRadius)
        .onError(() => {
          this.isError = true
        })
        .focusable(true)// <---- set to adjust rotating crown
    } else {
      Image(this.fallbackImageUrl)
        .objectFit(this.objectFit)
        .borderRadius(this.cornerRadius)
        .focusable(true)// <---- set to adjust rotating crown
    }
  }
}

@Entry
@Component
struct Index {
  @State private radioStationList:RadioStation[] = [new RadioStation("common/watch_home_location.png","app.media.search"),new RadioStation("common/watch_home_route.png","app.media.nearby"),new RadioStation("common/watch_home_search.png","app.media.search"),new RadioStation("common/watch_home_set.png","app.media.nearby")]

  private watchSize: string = '466px'

  context: UIContext = this.getUIContext()
  tabBar1: ComponentContent<Object> = new ComponentContent(this.context, wrapBuilder(buildText));

  @Builder
  buildList2() {
    Stack() {
      Column() {
      }
      .justifyContent(FlexAlign.Center)
      .width(this.watchSize)
      .height(this.watchSize)
      .clipShape(new CircleShape({ width: '100%', height: '100%' }))
      .backgroundColor(Color.White)

      ArcList({ initialIndex: 0 }) {
        ForEach(this.radioStationList, (station: RadioStation, index: number) => {
          ArcListItem() {
            ImageLoader(
              {
                imageUrl: RadioStation.getStationImage(station.images),
                fallbackImageUrl: RadioStation.getFallbackImage(station.stationCode),
                objectFit: ImageFit.Cover,
                cornerRadius: 24
              }
            )
              .width(px2vp(200))
              .height(px2vp(200))
              .onClick(() => {

              })
          }
        }, (item: RadioStation, index: number)  => index.toString() + item.stationCode)
      }.onScrollIndex((index: number) => {
        console.log("index ---<> " + index)
      })
      .enabled(true)
      .focusable(true)
      .defaultFocus(true)
      .focusOnTouch(true)
      .scrollBar(BarState.On)
      .scrollBarWidth(LengthMetrics.px(30))
      .digitalCrownSensitivity(CrownSensitivity.LOW)
      .fadingEdge(true)
      .flingSpeedLimit(2000)
      .onAppear( () => {
        try {
          this.getUIContext().getFocusController().requestFocus("test")
        } catch (error) {
          console.error('requestFocus failed code is ' + error.code + ' message is ' + error.message)
        }
      })
    }
    .align(Alignment.Center)
    .width(this.watchSize)
    .height(this.watchSize)
    .border({color: Color.Black, width: 1})
    .borderRadius(this.watchSize)
  }

  build() {
    Column() {
      this.buildList2()
    }
    .width('100%')
    .height('100%')
    .alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Center)
  }
}