Swiper Style, Date Selection, Custom Pop-up Keyboard, Text Component Line Break, Rich Text Adaptation

#harmonyosnext

[Daily HarmonyOS Next Knowledge] Swiper Style, Date Selection, Custom Pop-up Keyboard, Text Component Line Break, Rich Text Adaptation

1. HarmonyOS Swiper Component Style?

You can set the style directly. Refer to the following demo:

@Entry
@Component
struct SwiperDemo {
  private swiperController: SwiperController = new SwiperController();

  build() {
    Column({ space: 5 }) {
      Swiper(this.swiperController) {
        Text('0')
          .width(250)
          .height(250)
          .backgroundColor(Color.Gray)
          .textAlign(TextAlign.Center)
          .fontSize(30);
        Text('1')
          .width(250)
          .height(250)
          .backgroundColor(Color.Green)
          .textAlign(TextAlign.Center)
          .fontSize(30);
        Text('2')
          .width(250)
          .height(250)
          .backgroundColor(Color.Pink)
          .textAlign(TextAlign.Center)
          .fontSize(30);
      }
      .indicator(true)
      .margin({ right: 60 });

      Row({ space: 12 }) {
        Button('showNext')
          .onClick(() => {
            this.swiperController.showNext(); // Switch to next page via controller
          });
        Button('showPrevious')
          .onClick(() => {
            this.swiperController.showPrevious(); // Switch to previous page via controller
          });
      }.margin(5);
    }.width('100%')
    .margin({ top: 5 });
  }
}

2. Data Returned by HarmonyOS DatePickerDialog?

The setFullYear method uses a zero-based month index (0-11). When extracting the month value, add 1 to convert it to the standard month (1-12).

3. Auto-closing Custom Pop-ups and Custom Keyboards in HarmonyOS?

When using CustomDialogController to display a custom pop-up:

Custom Keyboard: For input components, use customKeyboard() with stopEditing() to close the keyboard when the input loses focus.

Reference: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-textinput-V5#ZH-CN_TOPIC_0000001884917738__customkeyboard10
Custom Pop-up: Use onWillDismiss() to close the pop-up and trigger events simultaneously. Example:

  onWillDismiss: (dismissDialogAction: DismissDialogAction) => {
    if (dismissDialogAction.reason == DismissReason.TOUCH_OUTSIDE) {
      dismissDialogAction.dismiss();
      // Handle subsequent logic here
    }
  }

Reference: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-methods-custom-dialog-box-V5

Use event notification (https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-emitter-V5) to decouple event handling.

4. Word Break Points for HarmonyOS Text Component?

Besides spaces, what other characters can be used as line break points in the Text component?

Recommendation: Use WordBreak.BREAK_WORD.

Non-CJK text: Breaks at any character if necessary.
CJK text: Preserves semantic units (e.g., Chinese characters) on the same line. This ensures better formatting for mixed-language content compared to BreakAll or BreakWord.