前言
各位同学有段时刻没有见面 因为一直很忙所以就没有去更新博客。最近有在学习这个鸿蒙的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里边的差不多咱们学会自定义弹窗理论上那些 警告弹窗 列表选择器弹窗, 日期滑动选择器弹窗 ,时刻滑动选择器弹窗 ,文本滑动选择器弹窗 ,咱们都是能够自己自定义完成的。这里就不展开讲有爱好的同学能够自己多花时刻研讨完成一下,最终呢 希望我都文章能帮助到各位同学工作和学习 如果你觉得文章还不错麻烦给我三连 关注点赞和转发 谢谢