HarmonyOS 鸿蒙Next 自定义弹框如何半屏包含安全域

HarmonyOS 鸿蒙Next 自定义弹框如何半屏包含安全域
半屏底部弹出框，需要包含底部安全域，CustomDialog是否有参数设置，或者其他方案代替

@CustomDialog
struct CustomDialogExample {
cancel?: () => void
confirm?: () => void
controller: CustomDialogController

build() {
Column() {
}.backgroundColor("#FFF").height(200).width('100%')
}
}

dialogController: CustomDialogController = new CustomDialogController({
builder: CustomDialogExample({
cancel: ()=> { this.onCancel() },
confirm: ()=> { this.onAccept() },
}),
width: px2vp(this.windowWidth),
height: 200,
customStyle:true
})

更多关于HarmonyOS 鸿蒙Next 自定义弹框如何半屏包含安全域的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

参考下这个demo：

[@CustomDialog](/user/CustomDialog)
struct CustomDialogExample {
 [@Link](/user/Link) textValue: string
 controller?: CustomDialogController
 cancel: () => void = () => {
 }
 confirm: () => void = () => {
 }

 build() {
   Column() {
     Text('Change text').fontSize(20).margin({ top: 10, bottom: 10 })
     TextInput({ placeholder: '', text: this.textValue }).width('90%')
       .onChange((value: string) => {
         this.textValue = value
       })
     Text('Whether to change a text?').fontSize(16).margin({ bottom: 10 })
     Flex({ justifyContent: FlexAlign.SpaceAround }) {
       Button('cancel')
         .onClick(() => {
           if (this.controller != undefined) {
             this.controller.close()
             this.cancel()
           }
         }).backgroundColor(0xffffff).fontColor(Color.Black)
       Button('confirm')
         .onClick(() => {
           if (this.controller != undefined) {
             this.controller.close()
             this.confirm()
           }
         }).backgroundColor(0xffffff).fontColor(Color.Red)
     }.margin({ bottom: 10 })
   }
   .backgroundColor(Color.Orange)
   .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM])
   .height('40%')
   .borderRadius(20)
 }
}

[@Entry](/user/Entry)
[@Component](/user/Component)
struct CustomDialogUser {
 [@State](/user/State) textValue: string = ''
 dialogController: CustomDialogController | null = new CustomDialogController({
   builder: CustomDialogExample({
     cancel: this.onCancel,
     confirm: this.onAccept,
     textValue: $textValue,
   }),
   cancel: this.exitApp,
   autoCancel: true,
   alignment: DialogAlignment.Bottom,
   gridCount: 4,
   customStyle: true,
   backgroundColor: 0xd9ffffff,
 })

 onCancel() {
   console.info('Callback when the first button is clicked')
 }

 onAccept() {
   console.info('Callback when the second button is clicked')
 }

 exitApp() {
   console.info('Click the callback in the blank area')
 }

 build() {
   Column() {
     Button('点击')
       .onClick(() => {
         if (this.dialogController != null) {
           this.dialogController.open()
         }
       }).backgroundColor(0x317aff)
   }.width('100%').height('100%').backgroundColor(Color.Green)
 }
}

更多关于HarmonyOS 鸿蒙Next 自定义弹框如何半屏包含安全域的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS 鸿蒙Next中，实现自定义弹框半屏包含安全域，可以通过以下步骤进行：

  1. 使用CustomDialog：自定义弹框通常通过CustomDialog来实现，因为它允许开发者自定义弹窗的布局和内容。
  2. 设置弹窗大小和位置：在创建CustomDialog时，可以通过配置参数来设置弹窗的大小和位置，以实现半屏显示。同时，确保弹窗内容在安全区域内布局，避免与系统状态栏、导航栏等重叠。
  3. 考虑安全区域：在布局自定义弹框时，要确保组件的绘制区域不会超出安全区域。可以使用expandSafeArea属性来扩展组件的绘制区域至安全区外（如果需要的话），但通常建议保持组件在安全区域内以确保良好的用户体验。
  4. 测试和调试：在实现自定义弹框后，需要在不同的设备和屏幕尺寸上进行测试和调试，以确保弹窗的显示效果和交互行为符合预期。

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html

回到顶部