半模態(tài)轉(zhuǎn)場(chǎng)

通過(guò)bindSheet屬性為組件綁定半模態(tài)頁(yè)面，在組件插入時(shí)可通過(guò)設(shè)置自定義或默認(rèn)的內(nèi)置高度確定半模態(tài)大小。

說(shuō)明：
開發(fā)前請(qǐng)熟悉鴻蒙開發(fā)指導(dǎo)文檔 ：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]
從API Version 10開始支持。后續(xù)版本如有新增內(nèi)容，則采用上角標(biāo)單獨(dú)標(biāo)記該內(nèi)容的起始版本。

不支持橫豎屏切換。

不支持路由跳轉(zhuǎn)。

屬性

說(shuō)明：

在非雙向綁定情況下，以拖拽方式關(guān)閉半模態(tài)頁(yè)面不會(huì)改變isShow參數(shù)的值。

為了使isShow參數(shù)值與半模態(tài)界面的狀態(tài)同步，建議使用[$$]雙向綁定isShow參數(shù)。

SheetOptions

SheetSize

示例

// xxx.ets
@Entry
@Component
struct SheetTransitionExample {
  @State isShow:boolean = false
  @State isShow2:boolean = false
  @State sheetHeight:number = 300;
  @State showDragBar:boolean = true;

  @Builder myBuilder() {
    Column() {
      Button("change height")
        .margin(10)
        .fontSize(20)
        .onClick(()= >{
          this.sheetHeight = 500;
        })

      Button("Set Illegal height")
        .margin(10)
        .fontSize(20)
        .onClick(()= >{
          this.sheetHeight = -1;
        })

      Button("close dragBar")
        .margin(10)
        .fontSize(20)
        .onClick(()= >{
          this.showDragBar = false;
        })

      Button("close modal 1")
        .margin(10)
        .fontSize(20)
        .onClick(()= >{
          this.isShow = false;
        })
    }
    .width('100%')
    .height('100%')
  }

  build() {
    Column() {
      Button("transition modal 1")
        .onClick(() = > {
          this.isShow = true
        })
        .fontSize(20)
        .margin(10)
        .bindSheet($$this.isShow, this.myBuilder(), {height: this.sheetHeight, dragBar: this.showDragBar, backgroundColor: Color.Green, onAppear: () = > {console.log("BindSheet onAppear.")}, onDisappear: () = > {console.log("BindSheet onDisappear.")}})
    }
    .justifyContent(FlexAlign.Center)
    .width('100%')
    .height('100%')
  }
}

審核編輯 黃宇