HarmonyOS 鸿蒙Next 自定义组件如交易密码输入如何实现在业务需要时弹出覆盖在其他page页面上 在不需要时从当前page移除

显隐控制-通用属性-组件通用信息-ArkTS组件-ArkUI（方舟UI框架）-应用框架 - 华为HarmonyOS开发者 (huawei.com)

如果是想实现自定义键盘的效果，可以参考demo

// xxx.ets
@Entry
@Component
struct TextAreaExample {
  controller: TextAreaController = new TextAreaController()
  @State inputValue: string = ""

  // 自定义键盘组件
  @Builder CustomKeyboardBuilder() {
    Column() {
      Button('x').onClick(() => {
        // 关闭自定义键盘
        this.controller.stopEditing()
      })
      Grid() {
        ForEach([1, 5, 3,8 ,9, 6, 2, 4,7 , '*', 0, '#'], (item: number | string) => {
          GridItem() {
            Button(item + "").width(110).onClick(() => {
              this.inputValue += item
            })
          }
        }).maxCount(3).columnsGap(10).rowsGap(10).padding(5)
      }.backgroundColor(Color.Gray)
    }
  }

  build() {
    Column() {
      TextArea({ controller: this.controller, text: this.inputValue})
        // 绑定自定义键盘
        .customKeyboard(this.CustomKeyboardBuilder()).margin(10).border({ width: 1 })
        .height(200)
    }
  }
}

如果是自定义弹出和关闭视图动画，可以参考demo：

@Entry
@Component
struct CustomDialogUser {
  @State isAutoCancel: boolean = true;
  dialogController: CustomDialogController = new CustomDialogController({
    builder: CustomDialogExample({ isAutoCancel: this.isAutoCancel }),
    autoCancel: this.isAutoCancel,
    customStyle: true
  })

  build() {
    Column() {
      Button('click me')
        .onClick(() => {
          this.dialogController.open()
        })
    }.width('100%')
    .height('100%')
    .onClick(() => {
    })
  }
}

// 弹窗交互
@CustomDialog
struct CustomDialogExample {
  controller: CustomDialogController = new CustomDialogController({
    builder: CustomDialogExample({}),
    autoCancel: false
  })
  @State showFlag: Visibility = Visibility.Visible;
  @State isAutoCancel: boolean = false;
  textController: TextAreaController = new TextAreaController()

  build() {
    Column() {
      Row() {
        TextArea({ controller: this.textController })
          .fontSize(20)
      }
      .padding(8)
      .backgroundColor('#FFFFFF')
      .height(200)
      .margin({ bottom: -5 })
      .width('100%')
    }
    .justifyContent(FlexAlign.End)
    .width('100%')
    .height('100%')
    .margin({
      bottom: -15
    })
    .onClick(() => {
      console.log('dialogClick')
      if (this.isAutoCancel) {
        console.log('dialogClick2')
        this.cancel();
      }
    })
    .visibility(this.showFlag)
    .transition(TransitionEffect.OPACITY.animation({ duration: 250 })
      .combine(TransitionEffect.translate({ y: 100 })))
  }

  cancel() {
    this.showFlag = Visibility.Hidden
    console.log('closeDialog')
    setTimeout(() => {
      this.controller.close()
    }, 250)
  }
}