HarmonyOS CustomDialog底部默认间距

CustomDialog与手机屏幕底部有一段间距，无法设置充满屏幕底部。customStyle为true，内部布局没有下边距。

HarmonyOS

FengTianYa

2024-10-15 12:36:40

浏览

回答 1

待解决

回答 1

按赞同

按时间

Heiang

初始化自定义弹窗时，通过alignment参数设置对齐方式，通过offset设置弹窗偏移量。参考链接：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-methods-custom-dialog-box-V5#customdialogcontrolleroptions%E5%AF%B9%E8%B1%A1%E8%AF%B4%E6%98%8E

也可以使用半模态或者panel组件来实现，底部没有间距。panel组件可以参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-panel-V5

半模态参考代码：

@Entry  
@Component  
struct bindsheet {  
  @State isShow: boolean = false  
  @Builder  
  myBuilder() {  
    Column() {  
      Button("关闭弹窗")  
        .margin(10)  
        .fontSize(20)  
        .onClick(() => {  
          this.isShow = false;  
        })//通过点击事件将isShow属性变为false，bindSheet弹窗关闭  
    }  
    .width('100%')  
    .height('100%')  
  }  
  
  build() {  
    Column() {  
      Button("打开弹窗")  
        .onClick(() => {  
          this.isShow = true  
        })  
          //通过点击事件将isShow属性变为true，bindSheet弹窗弹出  
        .fontSize(20)  
        .margin(10)  
        .bindSheet($$this.isShow, this.myBuilder(), {  
          detents: [SheetSize.MEDIUM, SheetSize.LARGE, 200],  
          backgroundColor: Color.Gray,  
          showClose:false, //不显示关闭按钮  
          enableOutsideInteractive: true, //允许交互，不显示蒙层  
          blurStyle: BlurStyle.Thick,  
          preferType: SheetType.CENTER,  
          shouldDismiss: ((sheetDismiss: SheetDismiss) => {  
            console.log("bind sheet shouldDismiss")  
            sheetDismiss.dismiss()  
          })  
        })  
    }  
    .backgroundColor("#ff578ddd")  
    .justifyContent(FlexAlign.Start)  
    .width('100%')  
    .height('100%')  
  }  
}