以预览图片为例
先创建一个名为PreViewImage 的 @CustomDialog 组件,并用export default PreViewImage,导出组件。
@CustomDialog
struct PreViewImage {
controller: CustomDialogController
url: string = ''
build() {
Column() {
Image(this.url)
.width('100%')
}
.backgroundColor(Color.Black)
.width('100%')
.height('100%')
.justifyContent(FlexAlign.Center)
.onClick(()=>{
this.controller.close()
})
}
}
export default PreViewImage
再在父组件创建一个 命名为preViewControl的CustomDialogController ,将PreViewImage组件 作为builder的参数,将url传递给PreViewImage组件,将custcuomStyle值设为true,将控制@CustomDialog的方法写入方法内,这样调用preViewImageFn时也就调用了this.preViewControl.open(),将弹窗打开了。
// 父组件 多个image message
import Message from './Message'
import PreViewImage from './PreViewImage'
@State
messageList: MessageInfoModel[] = []
preViewUrl: string = ''
preViewControl: CustomDialogController = new CustomDialogController({
builder: PreViewImage({
url: this.preViewUrl
}),
autoCancel: false,
custcuomStyle: true
})
...
List({ space: 16, scroller: this.scroller }) {
ForEach(this.messageList, (message: MessageInfoModel) => {
ListItem() {
Message({
preViewImageFn: () => {
this.preViewUrl = 'file://' + message.sourceFilePath
this.preViewControl.open()
}
})
}
})
}
.layoutWeight(1)
.backgroundColor($r('app.color.back_color'))
.padding({
top: 20
})
传递方法
将 方法 preViewImageFn 作为参数传递给子组件Message,在子组件Message中接收 方法并点击图片时调用该方法。
// message 子组件
preViewImageFn:()=>void = ()=>{}
...
Column(){
// 不允许操控原图
Image('file://'+ this.message.sourceFilePath)
.width('100%')
.borderRadius(4)
.enabled(false)
}
.width('40%')
.padding({
left:10,
right:10
})
.onClick(()=>{
this.preViewImageFn()
})