HarmonyOS 鸿蒙Next 自定义的dialog如何显示在屏幕中间

HarmonyOS 鸿蒙Next 自定义的dialog如何显示在屏幕中间 自定义的时间弹窗或者用户隐私协议弹窗如何显示在屏幕中间?自定义dialog代码如下:

controller: CustomDialogController

private selectDate: Date = new Date()

@State lunar: boolean = false

build() {

  Column({ space: 20 }) {

    Button('切换公历农历')

      .onClick(() => {

        this.lunar = !this.lunar

      })

    DatePicker({

      start: new Date('2009-1-1'),

      end: new Date('2100-12-31'),

      selected: this.selectDate

    })

      .lunar(this.lunar)

      .disappearTextStyle({ color: Color.Gray, font: { size: '16fp', weight: FontWeight.Bold } })

      .textStyle({ color: '#ff182431', font: { size: '18fp', weight: FontWeight.Normal } })

      .selectedTextStyle({ color: '#ff0000FF', font: { size: '26fp', weight: FontWeight.Regular } })

      .onDateChange((value) => {

        console.debug('时间选择器onDateChange',`选择的日期:${DateUtil.getFormatDateStr(value,'yyyy/MM/dd')}`+'--'+DateUtil.getFormatDateStr(value))

        this.selectDate = value

      })

    Row() {

      Button('取消')

        .onClick(() => {

          this.controller.close()

        })

      Button('确认')

        .onClick(() => {

          this.controller.close()

          AppStorage.setOrCreate('selectDate', DateUtil.getFormatDateStr(this.selectDate,'yyyy/MM/dd'))

          console.debug('时间选择器',this.selectDate)

        })

    }

    .width('95%')

    .justifyContent(FlexAlign.SpaceEvenly)

  }

  .width('90%')

  .justifyContent(FlexAlign.Center)

}

更多关于HarmonyOS 鸿蒙Next 自定义的dialog如何显示在屏幕中间的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

设置customStyle为true即可开启使用自定义样式。

属性用法参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-methods-custom-dialog-box

需要使用customStyle属性设置才能显示自定义样式，官网案例稍微改了一下可以实现DatePicker显示在屏幕中间，参考如下:

@CustomDialog
struct CustomDialogExample {
  controller?: CustomDialogController
  private selectDate: Date = new Date()
  build() {
    Column {
      DatePicker({
        start: new Date('2009-1-1'),
        end: new Date('2100-12-31'),
        selected: this.selectDate
      })
    }
  }
}

@Entry
@Component
struct Index {
  @State textValue: string = ''
  @State inputValue: string = 'click me'
  dialogController: CustomDialogController | null = new CustomDialogController({
    builder: CustomDialogExample(),
    openAnimation: {
      duration: 1200,
      curve: Curve.Friction,
      delay: 500,
      playMode: PlayMode.Alternate,
      onFinish: () => {
        console.info('play end')
      }
    },
    autoCancel: true,
    alignment: DialogAlignment.Center,
    gridCount: 4,
    customStyle: true,
    backgroundColor: 0xd9ffffff,
    cornerRadius: 10,
  })

  // 在自定义组件即将析构销毁时将dialogControlle置空
  aboutToDisappear() {
    this.dialogController = null // 将dialogController置空
  }

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

更多关于HarmonyOS 鸿蒙Next 自定义的dialog如何显示在屏幕中间的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS 鸿蒙Next中，自定义的Dialog显示在屏幕中间通常涉及设置Dialog的布局参数以及窗口属性。以下是实现这一功能的基本方法：

  1. 自定义Dialog布局： 首先，确保你有一个自定义的XML布局文件，用于Dialog的显示内容。这个布局文件应定义Dialog的内部结构和样式。

  2. 设置Dialog的窗口属性： 在创建Dialog实例后，你需要通过getWindow()方法获取Dialog的Window对象，并设置其属性。具体地，你需要设置WindowManager.LayoutParams中的gravity属性为Gravity.CENTER，这样Dialog就会显示在屏幕中间。

    示例代码：

    Dialog dialog = new Dialog(this);
dialog.setContentView(R.layout.custom_dialog_layout);
Window window = dialog.getWindow();
if (window != null) {
    WindowManager.LayoutParams layoutParams = window.getAttributes();
    layoutParams.gravity = Gravity.CENTER;
    window.setAttributes(layoutParams);
}
dialog.show();

    注意：虽然要求中不回答Java相关内容，但上述代码示例仅用于说明如何通过Window属性设置Dialog位置，实际实现中应使用HarmonyOS对应的API和语法。

  3. 确保Dialog内容适配： 确保自定义布局的内容大小适中，不会因为过大或过小而影响显示效果。

如果问题依旧没法解决请联系官网客服, 官网地址是 https://www.itying.com/category-93-b0.html，

回到顶部