1# 半模态转场 2 3通过bindSheet属性为组件绑定半模态页面，在组件插入时可通过设置自定义或默认的内置高度确定半模态大小。 4 5> **说明：** 6> 7> 从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8> 9> 不支持横竖屏切换。 10> 11> 不支持路由跳转。 12 13## 属性 14 15| 名称 | 参数 | 参数描述 | 16| --------- | ---------------------------------------- | ---------------------------------------- | 17| bindSheet | isShow: boolean,<br>builder: [CustomBuilder](ts-types.md#custombuilder8),<br>options?: [SheetOptions](#sheetoptions) | 给组件绑定半模态页面，点击后显示模态页面。<br>isShow: 是否显示半模态页面。<br>从API version 10开始，该参数支持[$$](../../quick-start/arkts-two-way-sync.md)双向绑定变量<br>builder: 配置半模态页面内容。<br> options: 配置半模态页面的可选属性。 | 18> **说明：** 19> 20> 在非双向绑定情况下，以拖拽方式关闭半模态页面不会改变isShow参数的值。 21> 22> 为了使isShow参数值与半模态界面的状态同步，建议使用[$$](../../quick-start/arkts-two-way-sync.md)双向绑定isShow参数。 23## SheetOptions 24 25| 名称 | 类型 | 必填 | 描述 | 26| --------------- | ---------------------------------------- | ---- | --------------- | 27| height | [SheetSize](#sheetsize) \| [Length](ts-types.md#length) | 否 | 半模态高度，默认是LARGE。 | 28| dragBar | boolean | 否 | 是否显示控制条，默认显示。 | 29| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 半模态页面的背板颜色。 | 30| maskColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 半模态页面的背景蒙层颜色。 | 31| onAppear | () => void | 否 | 半模态页面显示回调函数。 | 32| onDisappear | () => void | 否 | 半模态页面回退回调函数。 | 33 34## SheetSize 35 36| 名称 | 参数描述 | 37| ------ | --------------- | 38| MEDIUM | 指定半模态高度为屏幕高度一半。 | 39| LARGE | 指定半模态高度几乎为屏幕高度。 | 40 41## 示例 42 43```ts 44// xxx.ets 45import display from '@ohos.display'; 46@Entry 47@Component 48struct SheetTransitionExample { 49 @State isShow:boolean = false 50 @State isShow2:boolean = false 51 @State sheetHeight:number = 300; 52 @State showDragBar:boolean = true; 53 @State screenHeight:number = 0; 54 55 aboutToAppear() { 56 let displayClass: display.Display | null = null; 57 58 try { 59 displayClass = display.getDefaultDisplaySync(); 60 console.info(`[screen info]: ${JSON.stringify(displayClass)}`) 61 this.screenHeight = displayClass.height; // 获取屏幕高度 62 } catch (exception) { 63 console.error('Failed to obtain the default display object. Code: ' + JSON.stringify(exception)); 64 } 65 } 66 67 @Builder myBuilder() { 68 Column() { 69 Button("change height") 70 .margin(10) 71 .fontSize(20) 72 .onClick(()=>{ 73 this.sheetHeight = 500; 74 }) 75 76 Button("Set Illegal height") 77 .margin(10) 78 .fontSize(20) 79 .onClick(()=>{ 80 this.sheetHeight = this.screenHeight; 81 }) 82 83 Button("close dragBar") 84 .margin(10) 85 .fontSize(20) 86 .onClick(()=>{ 87 this.showDragBar = false; 88 }) 89 90 Button("close modal 1") 91 .margin(10) 92 .fontSize(20) 93 .onClick(()=>{ 94 this.isShow = false; 95 }) 96 } 97 .width('100%') 98 .height('100%') 99 } 100 101 build() { 102 Column() { 103 Button("transition modal 1") 104 .onClick(() => { 105 this.isShow = true 106 }) 107 .fontSize(20) 108 .margin(10) 109 .bindSheet($$this.isShow, this.myBuilder(), {height: this.sheetHeight, dragBar: this.showDragBar, backgroundColor: Color.Green, onAppear: () => {console.log("BindSheet onAppear.")}, onDisappear: () => {console.log("BindSheet onDisappear.")}}) 110 } 111 .justifyContent(FlexAlign.Center) 112 .width('100%') 113 .height('100%') 114 } 115} 116``` 117 118 119
