半模态转场如何控制固定高度?

Question

半模态转场如何控制固定高度

Answer 1

解决措施

可以通过bindSheet的options?: SheetOptions参数对高度进行控制，暂不支持控制固定宽度。

代码示例

@Entry 
@Component 
struct SheetTransitionExample { 
  @State isShow: boolean = false; 
  @State sheetHeight: number = 300; 
 
  @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 = 0; 
        }) 
    } 
    .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, backgroundColor: Color.Green }) 
    } 
    .justifyContent(FlexAlign.Center) 
    .width('100%') 
    .height('100%') 
  } 
}

参考链接

半模态转场