鸿蒙ArkTS声明式开发：跨平台支持列表【全屏模态转场】模态转场设置

全屏模态转场

通过bindContentCover属性为组件绑定全屏模态页面，在组件插入和删除时可通过设置转场参数ModalTransition显示过渡动效。

说明：

从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 不支持横竖屏切换。

属性

名称	参数	参数描述
bindContentCover	isShow: boolean, builder: [CustomBuilder], options?: [ContentCoverOptions]	给组件绑定全屏模态页面，点击后显示模态页面。模态页面内容自定义，显示方式可设置无动画过渡，上下切换过渡以及透明渐变过渡方式。 isShow: 是否显示全屏模态页面。 从API version 10开始，该参数支持[$$]双向绑定变量 builder: 配置全屏模态页面内容。 options: 配置全屏模态页面的可选属性。

ContentCoverOptions

名称	类型	必填	描述
modalTransition	[ModalTransition]	否	全屏模态页面的转场方式。
backgroundColor	[ResourceColor]	否	全屏模态页面的背板颜色。
onAppear	() => void	否	全屏模态页面显示回调函数。
onDisappear	() => void	否	全屏模态页面回退回调函数。

示例

示例1

全屏模态无动画转场模式下，自定义转场动画。

// xxx.ets @Entry @Component struct ModalTransitionExample {   @State isShow:boolean = false   @State isShow2:boolean = false    @Builder myBuilder2() {     Column() {       Button("close modal 2")         .margin(10)         .fontSize(20)         .onClick(()=>{           this.isShow2 = false;         })     }     .width('100%')     .height('100%')   }    @Builder myBuilder() {     Column() {       Button("transition modal 2")         .margin(10)         .fontSize(20)         .onClick(()=>{           this.isShow2 = true;         }).bindContentCover($$this.isShow2, this.myBuilder2(), {modalTransition: ModalTransition.NONE, backgroundColor: Color.Orange, onAppear: () => {console.log("BindContentCover onAppear.")}, onDisappear: () => {console.log("BindContentCover onDisappear.")}})        Button("close modal 1")         .margin(10)         .fontSize(20)         .onClick(()=>{           this.isShow = false;         })     }     .width('100%')     .height('100%')     .justifyContent(FlexAlign.Center)   }    build() {     Column() {       Button("transition modal 1")         .onClick(() => {           this.isShow = true         })         .fontSize(20)         .margin(10)         .bindContentCover($$this.isShow, this.myBuilder(), {modalTransition: ModalTransition.NONE, backgroundColor: Color.Pink, onAppear: () => {console.log("BindContentCover onAppear.")}, onDisappear: () => {console.log("BindContentCover onDisappear.")}})     }     .justifyContent(FlexAlign.Center)     .backgroundColor("#ff49c8ab")     .width('100%')     .height('100%')   } } 

示例2

全屏模态无动画转场模式下，自定义转场动画。

// xxx.ets import curves from '@ohos.curves'; @Entry @Component struct ModalTransitionExample {   @State  @Watch("isShow1Change") isShow:boolean = false   @State  @Watch("isShow2Change") isShow2:boolean = false   @State isScale1:number = 1;   @State isScale2:number = 1;   @State flag: boolean = true   @State show: string = 'show'    isShow1Change() {     this.isShow ? this.isScale1 = 0.95 : this.isScale1 = 1   }   isShow2Change() {     this.isShow2 ? this.isScale2 = 0.95 : this.isScale2 = 1   }   @Builder myBuilder2() {     Column() {       Button("close modal 2")         .margin(10)         .fontSize(20)         .onClick(()=>{           this.isShow2 = false;         })     }     .width('100%')     .height('100%')   }     @Builder myBuilder() {     Column() {       Button("transition modal 2")         .margin(10)         .fontSize(20)         .onClick(()=>{           this.isShow2 = true;         }).bindContentCover($$this.isShow2, this.myBuilder2(), {modalTransition: ModalTransition.NONE, backgroundColor: Color.Orange, onAppear: () => {console.log("BindContentCover onAppear.")}, onDisappear: () => {console.log("BindContentCover onDisappear.")}})        Button("close modal 1")         .margin(10)         .fontSize(20)         .onClick(()=>{           this.isShow = false;         })     }     .width('100%')     .height('100%')     .justifyContent(FlexAlign.Center)     .scale({x: this.isScale2, y: this.isScale2})     .animation({curve:curves.springMotion()})   }    build() {     Column() {       Button("transition modal 1")         .onClick(() => {           this.isShow = true         })         .fontSize(20)         .margin(10)         .bindContentCover($$this.isShow, this.myBuilder(), {modalTransition: ModalTransition.NONE, backgroundColor: Color.Pink, onAppear: () => {console.log("BindContentCover onAppear.")}, onDisappear: () => {console.log("BindContentCover onDisappear.")}})     }     .justifyContent(FlexAlign.Center)     .backgroundColor("#ff49c8ab")     .width('100%')     .height('100%')     .scale({ x: this.isScale1, y: this.isScale1 })     .animation({ curve: curves.springMotion() })   } } 

示例3

全屏模态上下切换转场。

// xxx.ets @Entry @Component struct ModalTransitionExample {   @State isShow:boolean = false   @State isShow2:boolean = false    @Builder myBuilder2() {     Column() {       Button("close modal 2")         .margin(10)         .fontSize(20)         .onClick(()=>{           this.isShow2 = false;         })     }     .width('100%')     .height('100%')   }    @Builder myBuilder() {     Column() {       Button("transition modal 2")         .margin(10)         .fontSize(20)         .onClick(()=>{           this.isShow2 = true;         }).bindContentCover(this.isShow2, this.myBuilder2(), {modalTransition: ModalTransition.DEFAULT, backgroundColor: Color.Gray, onAppear: () => {console.log("BindContentCover onAppear.")}, onDisappear: () => {console.log("BindContentCover onDisappear.")}})        Button("close modal 1")         .margin(10)         .fontSize(20)         .onClick(()=>{           this.isShow = false;         })     }     .width('100%')     .height('100%')     .justifyContent(FlexAlign.Center)   }    build() {     Column() {       Button("transition modal 1")         .onClick(() => {           this.isShow = true         })         .fontSize(20)         .margin(10)         .bindContentCover($$this.isShow, this.myBuilder(), {modalTransition: ModalTransition.DEFAULT, backgroundColor: Color.Pink, onAppear: () => {console.log("BindContentCover onAppear.")}, onDisappear: () => {console.log("BindContentCover onDisappear.")}})     }     .justifyContent(FlexAlign.Center)     .backgroundColor(Color.White)     .width('100%')     .height('100%')   } } 

示例4

全屏模态透明度渐变转场。

// xxx.ets @Entry @Component struct ModalTransitionExample {   @State isShow:boolean = false   @State isShow2:boolean = false    @Builder myBuilder2() {     Column() {       Button("close modal 2")         .margin(10)         .fontSize(20)         .onClick(()=>{           this.isShow2 = false;         })     }     .width('100%')     .height('100%')     .justifyContent(FlexAlign.Center)   }     @Builder myBuilder() {     Column() {       Button("transition modal 2")         .margin(10)         .fontSize(20)         .onClick(()=>{           this.isShow2 = true;         }).bindContentCover(this.isShow2, this.myBuilder2(), {modalTransition: ModalTransition.ALPHA, backgroundColor: Color.Gray, onAppear: () => {console.log("BindContentCover onAppear.")}, onDisappear: () => {console.log("BindContentCover onDisappear.")}})        Button("close modal 1")         .margin(10)         .fontSize(20)         .onClick(()=>{           this.isShow = false;         })     }     .width('100%')     .height('100%')     .justifyContent(FlexAlign.Center)   }    build() {     Column() {       Button("transition modal 1")         .onClick(() => {           this.isShow = true         })         .fontSize(20)         .margin(10)         .bindContentCover($$this.isShow, this.myBuilder(), {modalTransition: ModalTransition.ALPHA, backgroundColor: Color.Pink, onAppear: () => {console.log("BindContentCover onAppear.")}, onDisappear: () => {console.log("BindContentCover onDisappear.")}})     }     .justifyContent(FlexAlign.Center)     .backgroundColor(Color.White)     .width('100%')     .height('100%')   } }