中国优质的IT技术网站
专业IT技术创作平台
IT职业在线教育平台
微信扫码分享
@Entry @Component struct Index { @State isShow: boolean = false @State isShow2: 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 = -1; }) Button("close modal 1") .margin(10) .fontSize(20) .onClick(() => { this.isShow = false; }) } .width('100%') .height('100%') //border颜色和backgroundColor一致 .backgroundColor("#36D") //修改圆角大小 .border({ width: 20, color: "#36D", radius: "200px" }) } build() { Column() { Button("transition modal 1") .onClick(() => { this.isShow = true }) .fontSize(20) .margin(10) .bindSheet($$this.isShow, this.myBuilder(), { height: this.sheetHeight, //把maskColor和backgroundColor设置一致 maskColor: Color.Red, backgroundColor: Color.Red, onAppear: () => { console.log("BindSheet onAppear.") }, onDisappear: () => { console.log("BindSheet onDisappear.") } }) }.justifyContent(FlexAlign.Center).width('100%').height('100%') } }