Toggle Control Dragging, Slider Component, Checkbox Component Style

#harmonyosnext

[Daily HarmonyOS Next Knowledge] Toggle Control Dragging, Slider Component, Checkbox Component Style, Adding Data in Loops, List Safe Area Issues

1. In HarmonyOS, when making a Toggle draggable (Toggle type is Button), the click event fires during dragging. How to block this?

When making a Toggle draggable (type Button), the click event fires during dragging. How to block this? This issue only occurs with Button type; Checkbox and Switch work fine.

import { hilog } from '@kit.PerformanceAnalysisKit';

@Component
export struct TestDragToggleWithBtn {
  @State offsetX: number = 0;
  @State offsetY: number = 0;
  @State positionX: number = 0;
  @State positionY: number = 0;
  @State toggleIsOn: boolean = true;
  private isDragging: boolean = false;

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) {
      Toggle({ type: ToggleType.Button, isOn: this.toggleIsOn }) {
        Text('Toggle')
      }
      .selectedColor(Color.Pink)
      // onchange callback fires before onActionEnd
      .onChange((isOn: boolean) => {
        hilog.info(0x0000, 'testTag', 'xxx %{public}s', onClick
        Toggle, isOn:
        $
        {
          isOn
        }
        )
        ;
        console.log('isDragging======' + this.isDragging)
        if (isOn == this.toggleIsOn) {
          return
        } else {
          this.toggleIsOn = isOn
        }
        if (this.isDragging) {
          this.toggleIsOn = !this.toggleIsOn
        }
      })
      .translate({ x: this.offsetX, y: this.offsetY })
      .gesture(
        PanGesture()
          .onActionStart((event: GestureEvent) => {
            this.isDragging = true;
          })
          .onActionUpdate((event: GestureEvent) => {
            this.offsetX = this.positionX + event.offsetX;
            this.offsetY = this.positionY + event.offsetY;
          })
          .onActionEnd((event: GestureEvent) => {
            this.positionX = this.offsetX;
            this.positionY = this.offsetY;
            this.isDragging = false;
          })
      )
    }
  }
}

2. The HarmonyOS Swiper component's indicator has a default width/height that cannot be modified?

This can be resolved by modifying the bottom attribute:

@Entry
@Component
struct TestSwipper {
  @State message: string = 'Hello World';
  private bannerInfo: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9]

  build() {
    if (this.bannerInfo && this.bannerInfo.length > 0) {
      Swiper() {
        ForEach(this.bannerInfo, (item: number, index: number) => {
          Column() {
            Image($r("app.media.startIcon"))
              .alt($r("app.media.startIcon"))
              .width("100%")
              .aspectRatio(3.649)
              .borderRadius("8vp")
              .objectFit(ImageFit.Cover)

            Column() {

            }.width('100%')
            .height(35)
          }

        })
      }
      .cachedCount(2)
      .autoPlay(true)
      .interval(3000)
      .vertical(false)
      .loop(true)
      .margin({ left: "16vp", right: "16vp" })
      .indicator(
        new DotIndicator()
          .bottom(22)
          .itemWidth("4vp")
          .itemHeight("4vp")
          .selectedItemWidth("6vp")
          .selectedItemHeight("6vp")
          .color(Color.Gray)
          .selectedColor(Color.White)
      )
    }
  }
}

3. HarmonyOS CheckBox custom styling issue?

Cannot modify the default CheckBox icon. Style must be set specifically for CheckBox.

Refer to the CheckBox style configuration documentation:

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-checkbox-V5

4. In HarmonyOS, how to add data to a Row/Column via a loop?

For example, add each string from a string[] as a Text in a Row.

Use ForEach or LazyForEach:

msgs: string[] = ['a', 'b', 'c']

ForEach(this.msgs, (item: string) => {
  Text(item)
})

5. HarmonyOS listItem does not support setting safe areas. Any workaround to make listItem extend beyond the safe area?

onPageShow(): void {
  let windowClass = AppStorage.get("windowStage") as window.WindowStage
  windowClass.getMainWindowSync().setWindowLayoutFullScreen(true)
}

onPageHide(): void {
  let windowClass = AppStorage.get("windowStage") as window.WindowStage
  windowClass.getMainWindowSync().setWindowLayoutFullScreen(false)
}

DEV Community