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