三種自定義彈窗UI組件封裝的實(shí)現(xiàn)

消息確認(rèn)彈窗

首先先定義一個(gè)新的組件 ConfirmDialog：

@CustomDialog
exportdefaultstructConfirmDialog{
title:string=''
content:string=''
confirmFontColor:string='#E84026'
cancelFontColor:string='#0A59F7'
confirmText:string='確認(rèn)'
cancelText:string='取消'
controller:CustomDialogController
cancel:()=>void
confirm:()=>void
build(){}
}

• 可選參數(shù)：標(biāo)題 title（默認(rèn)值：“”），正文內(nèi)容 content（默認(rèn)值：“”），確認(rèn)按鈕字體顏色 confirmFontColor（默認(rèn)值：#E84026），取消按鈕字體顏色 cancelFontColor（默認(rèn)值：#0A59F7），確認(rèn)按鈕文案（默認(rèn)值：確認(rèn)），取消按鈕文案（默認(rèn)值：取消）

• 必須參數(shù)：自定義彈窗控制器 controller: CustomDialogController，確認(rèn)按鈕觸發(fā)事件 confirm()，取消按鈕觸發(fā)事件 cancel()

標(biāo)題、正文、按鈕封裝：一個(gè)確認(rèn)彈窗組件主要由標(biāo)題、正文等文本內(nèi)容和取消、確認(rèn)等按鈕事件組成。下面將分別對(duì)文案和按鈕通過**@Extend**裝飾器進(jìn)行封裝。

@Extend 裝飾器將新的屬性函數(shù)添加到內(nèi)置組件上，如 Text、Column、Button 等。通過**@Extend**裝飾器可以快速定義并復(fù)用組件的自定義樣式。

//標(biāo)題title與正文content自定義樣式
@Extend(Text)functionfancfontSize(fontSize:number){
.fontSize(fontSize)
.width('100%')
.fontColor('rgba(0,0,0,0.86)')
.textAlign(TextAlign.Center)
.padding({top:15,bottom:0,left:8,right:8})
.alignSelf(ItemAlign.Center)
.margin({top:16})
}

//取消、確認(rèn)按鈕自定義樣式
@Extend(Text)functionfancBtn(fontColor:string){
.fontColor(fontColor)
.backgroundColor(0xffffff)
.width(188)
.height(29)
.fontSize(22)
.textAlign(TextAlign.Center)
}

@Builder 裝飾的方法用于定義組件的聲明式 UI 描述，在 一個(gè)自定義組件內(nèi)快速生成多個(gè)布局內(nèi)容。@Builder 裝飾方法的功能和語法規(guī)范與build 函數(shù)相同。

//文案樣式
@BuilderTipTextStyle(tip:string,fontSize:number){
Text(tip)
.fancfontSize(fontSize)
.visibility(tip.length>0?Visibility.Visible:Visibility.None)
}

• @Extend 裝飾器的內(nèi)容必須寫在 ConfirmDialog{} 組件外，且在 @Extend 裝飾器聲明的基礎(chǔ)內(nèi)置組件的方法之前不能出現(xiàn)用/*多行注釋（會(huì)報(bào)錯(cuò)），但可采用單行注釋//。

• @Builder 裝飾器的內(nèi)容要寫在 ConfirmDialog{} 組件內(nèi)，build(){} 外 。

• @Builder 裝飾器聲明的自定義組件內(nèi)部可包含 @Extend 聲明的自定義樣式的基礎(chǔ)組件，但是 @Extend 內(nèi)部不可包含 @Builder 裝飾器聲明的自定義組件。

ConfirmDialog 組件完整代碼：

//取消、確認(rèn)按鈕自定義樣式
@Extend(Text)functionfancBtn(fontColor:string){
.fontColor(fontColor)
.backgroundColor(0xffffff)
.width(188)
.height(29)
.fontSize(22)
.textAlign(TextAlign.Center)
}
//標(biāo)題title與正文content自定義樣式
@Extend(Text)functionfancfontSize(fontSize:number){
.fontSize(fontSize)
.width('100%')
.fontColor('rgba(0,0,0,0.86)')
.textAlign(TextAlign.Center)
.padding({top:15,bottom:0,left:8,right:8})
.alignSelf(ItemAlign.Center)
.margin({top:16})
}
@CustomDialog
exportdefaultstructConfirmDialog{
title:string=''
content:string=''
confirmFontColor:string='#E84026'
cancelFontColor:string='#0A59F7'
confirmText:string='確認(rèn)'
cancelText:string='取消'
controller:CustomDialogController
cancel:()=>void
confirm:()=>void
//標(biāo)題、正文文案樣式
@BuilderTipTextStyle(tip:string,fontSize:number){
Text(tip)
.fancfontSize(fontSize)
.visibility(tip.length>0?Visibility.Visible:Visibility.None)
}

build(){
Column(){
this.TipTextStyle(this.title,28)
this.TipTextStyle(this.content,22)
Flex({justifyContent:FlexAlign.SpaceAround}){
Text(this.cancelText)
.fancBtn(this.cancelFontColor)
.onClick(()=>{
this.controller.close()
this.cancel()
})
Text(this.confirmText)
.fancBtn(this.confirmFontColor)
.onClick(()=>{
this.controller.close()
this.confirm()
})
}.margin({top:30,bottom:16,left:16,right:16})
}
}
}

引用頁面代碼：

importConfirmDialogfrom'./components/dialog/ConfirmDialog.ets'
@Entry
@Component
structIndexComponent{
//確認(rèn)彈窗
privatetitle:string='標(biāo)題'
privatecontent:string='此操作將永久刪除該文件,是否繼續(xù)?'
privateconfirmText:string='刪除'
ConfirmDialogController:CustomDialogController=newCustomDialogController({
builder:ConfirmDialog({cancel:this.onCancel,confirm:()=>{
this.onAccept()
},title:this.title,content:this.content}),
cancel:this.onCancel,
autoCancel:true
})
//點(diǎn)擊取消按鈕或遮罩層關(guān)閉彈窗
onCancel(){
console.info('取消,關(guān)閉彈窗')
}
//點(diǎn)擊確認(rèn)彈窗
onAccept(){
console.info('確認(rèn),關(guān)閉彈窗')
}
build(){
Scroll(){
Column(){
Text('確認(rèn)彈窗')
.fontSize(24)
.width(300)
.height(60)
.border({width:5,color:0x317AF7,radius:10,style:BorderStyle.Solid})
.margin({top:20,bottom:10})
.textAlign(TextAlign.Center)
.onClick(()=>{
this.ConfirmDialogController.open()
})
}
.width('100%')
}
}
}

消息提示彈窗

首先看下效果：

首先先定義一個(gè)新的組件 PromptDialog：

@CustomDialog
exportdefaultstructPromptDialog{
controller:CustomDialogController
ancel:()=>void
build(){}
}

PromptDialog 組件完整代碼：

//標(biāo)題title與正文content自定義樣式
@Extend(Text)functionfancfontSize(fontSize:number){
.fontSize(fontSize)
.width('100%')
.fontColor('rgba(0,0,0,0.86)')
.textAlign(TextAlign.Center)
.padding({top:15,bottom:0,left:8,right:8})
.alignSelf(ItemAlign.Center)
.margin({top:16})
}
//底部按鈕自定義樣式
@Extend(Text)functionfancBtn(fontColor:string){
.backgroundColor(0xffffff)
.fontColor(fontColor)
.width(188)
.height(29)
.fontSize(22)
.textAlign(TextAlign.Center)
}
@CustomDialog
exportdefaultstructPromptDialog{
controller:CustomDialogController
cancel:()=>void
//標(biāo)題、正文文案樣式
@BuilderTipTextStyle(tip:string,fontSize:number){
Text(tip)
.fancfontSize(fontSize)
.visibility(tip.length>0?Visibility.Visible:Visibility.None)
}

build(){
Column(){
this.TipTextStyle($s('strings.title'),28)
this.TipTextStyle($s('strings.content'),22)
Flex({justifyContent:FlexAlign.Center}){
Text($s('strings.confirm'))
.fancBtn(0x0A59F7)
.onClick(()=>{
this.controller.close()
})
}.margin({top:30,bottom:16})
}
}
}

若標(biāo)題 title 與正文 content 中的文案是固定的，可如此示例一樣，可采用寫入到 resource 中的 zh_CN 和 en_US 文件中，通過 $s(‘strings.title’) 取值顯示，若是動(dòng)態(tài)獲取的，可采用消息確認(rèn)彈窗中傳參方式。

引用頁面代碼：

importPromptDialogfrom'./components/dialog/PromptDialog.ets'
@Entry
@Component
structIndexComponent{
//消息提示彈窗
PromptDialogController:CustomDialogController=newCustomDialogController({
builder:PromptDialog(),
autoCancel:true
})

build(){
Scroll(){
Column(){
Text('消息提示彈窗')
.fontSize(24)
.width(300)
.height(60)
.border({width:5,color:0x317AF7,radius:10,style:BorderStyle.Solid})
.margin({top:20,bottom:10})
.textAlign(TextAlign.Center)
.onClick(()=>{
this.PromptDialogController.open()
})
}
.width('100%')
}
}
}

消息輸入彈窗

首先看下效果：

首先先定義一個(gè)新的組件 InputDialog：

exportdefaultstructInputDialog{
title:string=''
content:string=''
@StateinputString:string=''
controller:CustomDialogController
cancel:()=>void
confirm:(data)=>void

build(){}
}

PromptDialog 組件完整代碼：

//取消、確認(rèn)按鈕自定義樣式
@Extend(Text)functionfancBtn(fontColor:string){
.fontColor(fontColor)
.backgroundColor(0xffffff)
.width(188)
.height(29)
.fontSize(22)
.textAlign(TextAlign.Center)
}
//標(biāo)題title與正文content自定義樣式
@Extend(Text)functionfancfontSize(fontSize:number){
.fontSize(fontSize)
.width('100%')
.fontColor('rgba(0,0,0,0.86)')
.textAlign(TextAlign.Start)
.padding({top:15,bottom:0,left:15,right:15})
.margin({top:16})
}
@CustomDialog
exportdefaultstructInputDialog{
title:string=''
content:string=''
@StateinputString:string=''
controller:CustomDialogController
cancel:()=>void
confirm:(data)=>void
//文案樣式
@BuilderTipTextStyle(tip:string,fontSize:number){
Text(tip)
.fancfontSize(fontSize)
.visibility(tip.length>0?Visibility.Visible:Visibility.None)
}

build(){
Column(){
this.TipTextStyle(this.title,28)
this.TipTextStyle(this.content,22)
//輸入框
TextInput()
.type(InputType.Normal)
.enterKeyType(EnterKeyType.Next)
.caretColor(Color.Green)
.height(44)
.margin({top:20,left:15;right:15})
.alignSelf(ItemAlign.Center)
.onChange((value:string)=>{
this.inputString=value
})
Flex({justifyContent:FlexAlign.SpaceAround}){
Text($s('strings.cancel'))
.fancBtn('#0A59F7')
.onClick(()=>{
this.controller.close()
this.cancel()
})
Text($s('strings.confirm'))
.fancBtn('#E84026')
.onClick(()=>{
this.controller.close()
console.log('inputString:'+this.inputString)
this.confirm(this.inputString)
})
}.margin({top:30,bottom:16,left:16,right:16})
}
}
}

引用頁面代碼：

importInputDialogfrom'./components/dialog/InputDialog.ets'
@Entry
@Component
structIndexComponent{

//輸入彈窗
privatetext:string='提示'
privatelabel:string='請(qǐng)輸入您的姓名'
InputDialogController:CustomDialogController=newCustomDialogController({
builder:InputDialog({cancel:this.onCancel,confirm:(data)=>{
this.confirm(data)
},title:this.text,content:this.label}),
cancel:this.onCancel,
autoCancel:true
})
//點(diǎn)擊取消按鈕或遮罩層關(guān)閉彈窗
onCancel(){
console.info('取消,關(guān)閉輸入彈窗')
}
//點(diǎn)擊確認(rèn)彈窗
confirm(data){
console.info('確認(rèn),關(guān)閉輸入彈窗,data:'+data)
}

build(){
Scroll(){
Column(){
Text('輸入彈窗')
.fontSize(24)
.width(300)
.height(60)
.border({width:5,color:0x317AF7,radius:10,style:BorderStyle.Solid})
.margin({top:20,bottom:10})
.textAlign(TextAlign.Center)
.onClick(()=>{
this.InputDialogController.open()
})
}
.width('100%')
}
}
}

總結(jié)