鸿蒙 akr ui 自定义弹窗实现教程

前言

各位同学有段时间没有见面 因为一直很忙所以就没有去更新博客。最近有在学习这个鸿蒙的ark ui开发 因为鸿蒙不是发布了一个鸿蒙next的测试版本 明年会启动纯血鸿蒙应用 所以我就想提前给大家写一些博客文章

效果图

具体实现：

• 
  
• 
  

  1 弹窗部分布局

  
  
  

@CustomDialog

struct CustomDialogExample {
@Link textValue: string
@Link inputValue: string
controller: CustomDialogController

  // 若尝试在CustomDialog中传入多个其他的Controller，以

  // 实现在CustomDialog中打开另一个或另一些CustomDialog，

  // 那么此处需要将指向自己的controller放在最后
cancel: () => void
confirm: () => void


  build() {
Column() {

      Text('改变文本').fontSize(20).margin({ top: 10, bottom: 10 })
TextInput({ placeholder: '', text: this.textValue }).height(60).width('90%')
.onChange((value: string) => {

          this.textValue = value

        })

      Text('是否更改文本?').fontSize(16).margin({top:20, bottom: 10 })
Flex({ justifyContent: FlexAlign.SpaceAround }) {
Button('取消')
.onClick(() => {

            this.controller.close()

            this.cancel()

          }).backgroundColor(0xffffff).fontColor(Color.Black)
Button('确认')
.onClick(() => {

            this.inputValue = this.textValue

            this.controller.close()

            this.confirm()

          }).backgroundColor(0xffffff).fontColor(Color.Red)

      }.margin({ top:20,bottom: 10 })

    }.height('40%')
// dialog默认的borderRadius为24vp，如果需要使用border属性，请和borderRadius属性一起使用。

  }

}

这边我们使用 Column 嵌套2个 text和一个 Flex 里面在嵌套2个 text来实现 ：然后2个回调方法

控制器实现：

@Entry
@Component

struct CustomDialogUser {
@State textValue: string = ''
@State inputValue: string = '点击改变'
dialogController: CustomDialogController = new CustomDialogController({
builder: CustomDialogExample({
cancel: this.onCancel,
confirm: this.onAccept,
textValue: $textValue,
inputValue: $inputValue

    }),
cancel: this.existApp,
autoCancel: true,
alignment: DialogAlignment.Center,
offset: { dx: 0, dy: -20 },
gridCount: 4,
customStyle: false

  })

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

  }

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

  }

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

  }

existApp() {
console.info('点击退出app ')

  }

build() {
Column() {
Button(this.inputValue)
.onClick(() => {
if (this.dialogController != undefined) {
this.dialogController.open()

          }

        }).backgroundColor(0x317aff)

    }.width('100%').margin({ top: 50})

  }

}

我们实现一个控制器容纳再 弹窗的构造方法里面设置 回调和我们的弹窗弹出位置：

dialogController: CustomDialogController = new CustomDialogController({
builder: CustomDialogExample({
cancel: this.onCancel,
confirm: this.onAccept,
textValue: $textValue,
inputValue: $inputValue
}),
cancel: this.existApp,
autoCancel: true,
alignment: DialogAlignment.Center,
offset: { dx: 0, dy: -20 },
gridCount: 4,
customStyle: false
})

在我们button点击后弹出

build() {
Column() {
Button(this.inputValue)
.onClick(() => {

        if (this.dialogController != undefined) {

          this.dialogController.open()

        }

      }).backgroundColor(0x317aff)

  }.width('100%').margin({ top: 50})

}

在自定义组件即将析构销毁时将controller置空

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

}

完整代码 ：

// xxx.ets
@CustomDialog

struct CustomDialogExample {
@Link textValue: string
@Link inputValue: string
controller: CustomDialogController
// 若尝试在CustomDialog中传入多个其他的Controller，以
// 实现在CustomDialog中打开另一个或另一些CustomDialog，
// 那么此处需要将指向自己的controller放在最后
cancel: () => void
confirm: () => void

build() {
Column() {
Text('改变文本').fontSize(20).margin({ top: 10, bottom: 10 })
TextInput({ placeholder: '', text: this.textValue }).height(60).width('90%')
.onChange((value: string) => {
this.textValue = value

        })
Text('是否更改文本?').fontSize(16).margin({top:20, bottom: 10 })
Flex({ justifyContent: FlexAlign.SpaceAround }) {
Button('取消')
.onClick(() => {
this.controller.close()
this.cancel()

          }).backgroundColor(0xffffff).fontColor(Color.Black)
Button('确认')
.onClick(() => {
this.inputValue = this.textValue
this.controller.close()
this.confirm()

          }).backgroundColor(0xffffff).fontColor(Color.Red)

      }.margin({ top:20,bottom: 10 })

    }.height('40%')
// dialog默认的borderRadius为24vp，如果需要使用border属性，请和borderRadius属性一起使用。

  }

}






@Entry
@Component

struct CustomDialogUser {
@State textValue: string = ''
@State inputValue: string = '点击改变'
dialogController: CustomDialogController = new CustomDialogController({
builder: CustomDialogExample({
cancel: this.onCancel,
confirm: this.onAccept,
textValue: $textValue,
inputValue: $inputValue

    }),
cancel: this.existApp,
autoCancel: true,
alignment: DialogAlignment.Center,
offset: { dx: 0, dy: -20 },
gridCount: 4,
customStyle: false

  })

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

  }

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

  }

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

  }

existApp() {
console.info('点击退出app ')

  }

build() {
Column() {
Button(this.inputValue)
.onClick(() => {
if (this.dialogController != undefined) {
this.dialogController.open()

          }

        }).backgroundColor(0x317aff)

    }.width('100%').margin({ top: 50})

  }

}

最后总结：

鸿蒙ark ui 里面的自定义弹窗和我们安卓还有flutter里面的差不多我们学会自定义弹窗理论上那些 警告弹窗 列表选择器弹窗， 日期滑动选择器弹窗 ，时间滑动选择器弹窗 ，文本滑动选择器弹窗 ，我们都是可以自己自定义实现的。这里就不展开讲有兴趣的同学可以自己多花时间研究实现一下,最后呢 希望我都文章能帮助到各位同学工作和学习 如果你觉得文章还不错麻烦给我三连 关注点赞和转发 谢谢