Dialog Callback Issues, Input Area Max Lines, Web Custom Nodes, Icon Library, Soft Keyboard Toggle

#harmonyosnext

[Daily HarmonyOS Next Knowledge] Dialog Callback Issues, Input Area Max Lines, Web Custom Nodes, Icon Library, Soft Keyboard Toggle

1. HarmonyOS: Why doesn't promptAction.openCustomDialog(contentNode) trigger the onWillDismiss callback?

Using promptAction.openCustomDialog(contentNode) fails to trigger the onWillDismiss callback.

When users close the dialog by clicking the overlay, swiping left/right, pressing the back button, or hitting ESC on the keyboard, if this callback is registered, the dialog will not close immediately. In the callback function, you can obtain the operation type that triggered the close via reason to decide whether to allow closing based on the cause. Currently, the reason returned by the component does not support the CLOSE_BUTTON enumeration value.
You cannot intercept the onWillDismiss callback again within the onWillDismiss callback.

Reference:

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

2. HarmonyOS: When TextArea sets maxLines(3), why does it continue to increase in height beyond 3 lines?

How to modify the code to achieve: default height is 3 lines when there is no input, and the input box scrolls when the content exceeds 10 lines.

Refer to the following code example:

TextArea({ placeholder: "请输入手机号" })
  .width(300)
  .placeholderColor(Color.Gray)
  .placeholderFont({ size: 20 })
  .fontColor(Color.Black)
  .fontSize(20)
  .backgroundColor(Color.Orange)
  .margin({ top: 35, left: 25 })
  .caretColor(Color.Green)
  .maxLines(3)
  .constraintSize({ maxHeight: 90 })

3. HarmonyOS: In dynamic creation scenarios, after calling dispose on the custom node BuilderNode mounting a web component, will the originally bound webviewController also be unbound?

In this case, it will not be unbound.

4. HarmonyOS: Does the system have a built-in common icon library?

Reference link: https://developer.huawei.com/consumer/cn/design/harmonyos-icon/

5. HarmonyOS: How to manually open/close the system soft keyboard?

You can use focusControl.requestFocus to control the input box to gain focus, and the soft keyboard will automatically pop up after the component gains focus.

To hide the soft keyboard, make the TextInput lose focus, such as by transferring focus to another component. For example, provide a Button component and set it to gain focus when clicked. When the button is clicked, the TextInput loses focus, and the soft keyboard hides.
Use the focusContrl.requestFocus interface to make the specified component gain focus. Refer to the documentation: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-focus-V5

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

Note: Components like Text and Image are not focusable by default and cannot trigger focus events in this state.

// xxx.ets
@CustomDialog
struct CustomDialogExample {
  private focusKey = 'name_input'; // Input box focus key
  controller?: CustomDialogController
  cancel: () => void = () => {
  }
  confirm: () => void = () => {
  }

  // onPageHide(): void {
  //   focusControl.requestFocus(this.focusKey)
  // }

  build() {
    Column() {
      Text('这是自定义弹窗')
        .fontSize(30)
        .height(100)

      Text('昵称')
        .fontSize(20)
        .margin({ top: 10, bottom: 10 })
      // .key(this.focusKey)
      // .id(this.focusKey)

      TextInput({ placeholder: '输入昵称',text:'', })
        .height(60)
        .width('90%')
        .defaultFocus(true)

      Button('测试')
        .key(this.focusKey)


      Button('点我关闭弹窗')
        .onClick(() => {
          if (this.controller != undefined) {
            this.controller.close()
          }
        })
        .margin(20)
    }
  }
}
@Entry
@Component
struct CustomDialogUser {
  dialogController: CustomDialogController | null = new CustomDialogController({
    builder: CustomDialogExample({
      cancel: ()=> { this.onCancel() },
      confirm: ()=> { this.onAccept() }
    }),
    cancel: this.existApp,
    autoCancel: true,
    onWillDismiss:(dismissDialogAction: DismissDialogAction)=> {
      console.info("reason=" + JSON.stringify(dismissDialogAction.reason))
      console.log("dialog onWillDismiss")
      if (dismissDialogAction.reason == DismissReason.PRESS_BACK) {
        dismissDialogAction.dismiss()
      }
      if (dismissDialogAction.reason == DismissReason.TOUCH_OUTSIDE) {
        dismissDialogAction.dismiss()
      }
    },
    alignment: DialogAlignment.Center,
    offset: { dx: 0, dy: -20 },
    customStyle: false,
    cornerRadius: 20,
    width: 300,
    height: 400,
    borderWidth: 1,
    borderStyle: BorderStyle.Dashed,//使用borderStyle属性，需要和borderWidth属性一起使用
    borderColor: Color.Blue,//使用borderColor属性，需要和borderWidth属性一起使用
    backgroundColor: Color.White,
    shadow: ({ radius: 20, color: Color.Grey, offsetX: 50, offsetY: 0}),
  })
  // 在自定义组件即将析构销毁时将dialogController置空
  aboutToDisappear() {
    this.dialogController = null // 将dialogController置空
  }

  onCancel() {
    console.info('Callback when the first button is clicked')
  }

  onAccept() {
    console.info('Callback when the second button is clicked')
  }

  existApp() {
    console.info('Click the callback in the blank area')
  }

  build() {
    Column() {
      Button('click me')
        .onClick(() => {
          if (this.dialogController != null) {
            this.dialogController.open()
          }
        }).backgroundColor(0x317aff)
    }.width('100%').margin({ top: 5 })
  }
}

DEV Community