• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 全屏模态转场
2
3通过bindContentCover属性为组件绑定全屏模态页面，在组件插入和删除时可通过设置转场参数ModalTransition显示过渡动效。
4
5>  **说明：**
6>
7>  从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
8>
9>  不支持横竖屏切换。
10>
11>  不支持路由跳转。
12
13## 属性
14
15| 名称               | 参数                                       | 参数描述                                     |
16| ---------------- | ---------------------------------------- | ---------------------------------------- |
17| bindContentCover | isShow: boolean,<br>builder: [CustomBuilder](ts-types.md#custombuilder8),<br>options?: [ContentCoverOptions](#contentcoveroptions) | 给组件绑定全屏模态页面，点击后显示模态页面。模态页面内容自定义，显示方式可设置无动画过渡，上下切换过渡以及透明渐变过渡方式。<br> isShow: 是否显示全屏模态页面。<br>从API version 10开始，该参数支持[$$](../../quick-start/arkts-two-way-sync.md)双向绑定变量<br>builder: 配置全屏模态页面内容。<br> options: 配置全屏模态页面的可选属性。 |
18## ContentCoverOptions
19
20继承自[BindOptions](ts-universal-attributes-sheet-transition.md#bindoptions)。
21
22| 名称            | 类型                                             | 必填 | 描述                     |
23| --------------- | ------------------------------------------------ | ---- | ------------------------ |
24| modalTransition | [ModalTransition](ts-types.md#modaltransition10) | 否   | 全屏模态页面的转场方式。 |
25
26## 示例
27
28### 示例1
29
30全屏模态无动画转场模式下，自定义转场动画。
31
32```ts
33// xxx.ets
34@Entry
35@Component
36struct ModalTransitionExample {
37  @State isShow:boolean = false
38  @State isShow2:boolean = false
39
40  @Builder myBuilder2() {
41    Column() {
42      Button("close modal 2")
43        .margin(10)
44        .fontSize(20)
45        .onClick(()=>{
46          this.isShow2 = false;
47        })
48    }
49    .width('100%')
50    .height('100%')
51  }
52
53  @Builder myBuilder() {
54    Column() {
55      Button("transition modal 2")
56        .margin(10)
57        .fontSize(20)
58        .onClick(()=>{
59          this.isShow2 = true;
60        }).bindContentCover(this.isShow2, this.myBuilder2(), {modalTransition: ModalTransition.NONE, backgroundColor: Color.Orange, onAppear: () => {console.log("BindContentCover onAppear.")}, onDisappear: () => {console.log("BindContentCover onDisappear.")}})
61
62      Button("close modal 1")
63        .margin(10)
64        .fontSize(20)
65        .onClick(()=>{
66          this.isShow = false;
67        })
68    }
69    .width('100%')
70    .height('100%')
71    .justifyContent(FlexAlign.Center)
72  }
73
74  build() {
75    Column() {
76      Button("transition modal 1")
77        .onClick(() => {
78          this.isShow = true
79        })
80        .fontSize(20)
81        .margin(10)
82        .bindContentCover(this.isShow, this.myBuilder(), {modalTransition: ModalTransition.NONE, backgroundColor: Color.Pink, onAppear: () => {console.log("BindContentCover onAppear.")}, onDisappear: () => {console.log("BindContentCover onDisappear.")}})
83    }
84    .justifyContent(FlexAlign.Center)
85    .backgroundColor("#ff49c8ab")
86    .width('100%')
87    .height('100%')
88  }
89}
90```
91
92![zh-cn_full_screen_modal_none_1](figures/zh-cn_full_screen_modal_none_1.gif)
93
94### 示例2
95
96全屏模态无动画转场模式下，自定义转场动画。
97
98```ts
99// xxx.ets
100import curves from '@ohos.curves';
101@Entry
102@Component
103struct ModalTransitionExample {
104  @State  @Watch("isShow1Change") isShow:boolean = false
105  @State  @Watch("isShow2Change") isShow2:boolean = false
106  @State isScale1:number = 1;
107  @State isScale2:number = 1;
108
109  isShow1Change() {
110    this.isShow ? this.isScale1 = 0.95 : this.isScale1 = 1
111  }
112  isShow2Change() {
113    this.isShow2 ? this.isScale2 = 0.95 : this.isScale2 = 1
114  }
115  @Builder myBuilder2() {
116    Column() {
117      Button("close modal 2")
118        .margin(10)
119        .fontSize(20)
120        .onClick(()=>{
121          this.isShow2 = false;
122        })
123    }
124    .width('100%')
125    .height('100%')
126  }
127
128
129  @Builder myBuilder() {
130    Column() {
131      Button("transition modal 2")
132        .margin(10)
133        .fontSize(20)
134        .onClick(()=>{
135          this.isShow2 = true;
136        }).bindContentCover(this.isShow2, this.myBuilder2(), {modalTransition: ModalTransition.NONE, backgroundColor: Color.Orange, onAppear: () => {console.log("BindContentCover onAppear.")}, onDisappear: () => {console.log("BindContentCover onDisappear.")}})
137
138      Button("close modal 1")
139        .margin(10)
140        .fontSize(20)
141        .onClick(()=>{
142          this.isShow = false;
143        })
144    }
145    .width('100%')
146    .height('100%')
147    .justifyContent(FlexAlign.Center)
148    .scale({x: this.isScale2, y: this.isScale2})
149    .animation({curve:curves.springMotion()})
150  }
151
152  build() {
153    Column() {
154      Button("transition modal 1")
155        .onClick(() => {
156          this.isShow = true
157        })
158        .fontSize(20)
159        .margin(10)
160        .bindContentCover(this.isShow, this.myBuilder(), {modalTransition: ModalTransition.NONE, backgroundColor: Color.Pink, onAppear: () => {console.log("BindContentCover onAppear.")}, onDisappear: () => {console.log("BindContentCover onDisappear.")}})
161    }
162    .justifyContent(FlexAlign.Center)
163    .backgroundColor("#ff49c8ab")
164    .width('100%')
165    .height('100%')
166    .scale({ x: this.isScale1, y: this.isScale1 })
167    .animation({ curve: curves.springMotion() })
168  }
169}
170```
171
172![zh-cn_full_screen_modal_none_2](figures/zh-cn_full_screen_modal_none_2.gif)
173
174### 示例3
175
176全屏模态上下切换转场。
177
178```ts
179// xxx.ets
180@Entry
181@Component
182struct ModalTransitionExample {
183  @State isShow:boolean = false
184  @State isShow2:boolean = false
185
186  @Builder myBuilder2() {
187    Column() {
188      Button("close modal 2")
189        .margin(10)
190        .fontSize(20)
191        .onClick(()=>{
192          this.isShow2 = false;
193        })
194    }
195    .width('100%')
196    .height('100%')
197  }
198
199  @Builder myBuilder() {
200    Column() {
201      Button("transition modal 2")
202        .margin(10)
203        .fontSize(20)
204        .onClick(()=>{
205          this.isShow2 = true;
206        }).bindContentCover(this.isShow2, this.myBuilder2(), {modalTransition: ModalTransition.DEFAULT, backgroundColor: Color.Gray, onAppear: () => {console.log("BindContentCover onAppear.")}, onDisappear: () => {console.log("BindContentCover onDisappear.")}})
207
208      Button("close modal 1")
209        .margin(10)
210        .fontSize(20)
211        .onClick(()=>{
212          this.isShow = false;
213        })
214    }
215    .width('100%')
216    .height('100%')
217    .justifyContent(FlexAlign.Center)
218  }
219
220  build() {
221    Column() {
222      Button("transition modal 1")
223        .onClick(() => {
224          this.isShow = true
225        })
226        .fontSize(20)
227        .margin(10)
228        .bindContentCover(this.isShow, this.myBuilder(), {modalTransition: ModalTransition.DEFAULT, backgroundColor: Color.Pink, onAppear: () => {console.log("BindContentCover onAppear.")}, onDisappear: () => {console.log("BindContentCover onDisappear.")}})
229    }
230    .justifyContent(FlexAlign.Center)
231    .backgroundColor(Color.White)
232    .width('100%')
233    .height('100%')
234  }
235}
236```
237
238![zh-cn_full_screen_modal_default](figures/zh-cn_full_screen_modal_default.gif)
239
240### 示例4
241
242全屏模态透明度渐变转场。
243
244```ts
245// xxx.ets
246@Entry
247@Component
248struct ModalTransitionExample {
249  @State isShow:boolean = false
250  @State isShow2:boolean = false
251
252  @Builder myBuilder2() {
253    Column() {
254      Button("close modal 2")
255        .margin(10)
256        .fontSize(20)
257        .onClick(()=>{
258          this.isShow2 = false;
259        })
260    }
261    .width('100%')
262    .height('100%')
263    .justifyContent(FlexAlign.Center)
264  }
265
266
267  @Builder myBuilder() {
268    Column() {
269      Button("transition modal 2")
270        .margin(10)
271        .fontSize(20)
272        .onClick(()=>{
273          this.isShow2 = true;
274        }).bindContentCover(this.isShow2, this.myBuilder2(), {modalTransition: ModalTransition.ALPHA, backgroundColor: Color.Gray, onAppear: () => {console.log("BindContentCover onAppear.")}, onDisappear: () => {console.log("BindContentCover onDisappear.")}})
275
276      Button("close modal 1")
277        .margin(10)
278        .fontSize(20)
279        .onClick(()=>{
280          this.isShow = false;
281        })
282    }
283    .width('100%')
284    .height('100%')
285    .justifyContent(FlexAlign.Center)
286  }
287
288  build() {
289    Column() {
290      Button("transition modal 1")
291        .onClick(() => {
292          this.isShow = true
293        })
294        .fontSize(20)
295        .margin(10)
296        .bindContentCover(this.isShow, this.myBuilder(), {modalTransition: ModalTransition.ALPHA, backgroundColor: Color.Pink, onAppear: () => {console.log("BindContentCover onAppear.")}, onDisappear: () => {console.log("BindContentCover onDisappear.")}})
297    }
298    .justifyContent(FlexAlign.Center)
299    .backgroundColor(Color.White)
300    .width('100%')
301    .height('100%')
302  }
303}
304```
305
306![zh-cn_full_screen_modal_alpha](figures/zh-cn_full_screen_modal_alpha.gif)
307