HarmonyOS 鸿蒙Next 自定义的Dialog,如何不在左右两侧留边距,直接填满屏幕宽度呢

发布于 1周前 作者 bupafengyu 最后一次编辑是 5天前 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 自定义的Dialog,如何不在左右两侧留边距,直接填满屏幕宽度呢

自定义的Dialog,如何不在左右两侧留边距,直接填满屏幕宽度呢 代码如下:

@CustomDialog 
export struct CustomDatePickerDialog { 
    private controller: CustomDialogController = new CustomDialogController({ 
        builder: CustomDatePickerDialog() 
    }); 
    
    private onDateSelect: (selectDate: string) => void = () => { }; 
    private selectDate: string = ""; 

    build() { 
        Column() { 
            Row() { 
                Image($r("app.media.ic_back_grey")) 
                    .width(20) 
                    .height(26) 
                    .padding(5) 
                    .margin(10) 
                    .onClick(() => { 
                        this.controller.close(); 
                    }); 

                Blank(); 

                Text("完成") 
                    .fontColor($r("app.color.color33")) 
                    .padding(10) 
                    .fontSize(15) 
                    .onClick(() => { 
                        this.onDateSelect(this.selectDate); 
                        this.controller.close(); 
                    }); 
            }.width("100%").height(45); 

            DatePicker({ 
                start: DateUtils.getToday(), 
                end: DateUtils.getLastDayOfYear(30), 
                selected: DateUtils.getToday() 
            }) 
            .width("100%") 
            .onDateChange((value) => { 
                this.selectDate = DateUtils.getFormatDateStr(value, "yyyy-MM-dd"); 
            }); 
        }.width("100%").backgroundColor(Color.White); 
    } 

    private datePickerDialogController: CustomDialogController | null = 
        new CustomDialogController({ 
            builder: CustomDatePickerDialog({ 
                onDateSelect: (selectDate) => { 
                    ToastUtils.showToast(selectDate); 
                } 
            }), 
            cornerRadius: 0, 
            alignment: DialogAlignment.Bottom, 
            backgroundColor: Color.White, 
            autoCancel: false, 
            height: 230, 
            onWillDismiss: () => { } 
        }); 
}

2 回复
自定义弹窗 (CustomDialog)中的customStyle属性置为true时,弹窗宽度可以达到最大化。

在HarmonyOS 鸿蒙Next中,自定义Dialog要直接填满屏幕宽度而不留边距,可尝试以下方法:

首先,确保Dialog的自定义样式已启用。在创建CustomDialogController时,设置customStyle: true,这是自定义弹框宽度和高度设置生效的前提。

其次,在Dialog的布局构建中,将最外层容器的宽度设置为“100%”。例如,在Flex或Column布局中,使用.width('100%')来确保容器宽度充满屏幕。但需注意,如果Dialog内部组件本身的宽度设置不当,可能会影响到Dialog的最终显示效果。

此外,也可以尝试使用具体的像素值(如720lpx,假设屏幕默认lpx基准值为720)来设置宽度,但这种方法在不同分辨率的设备上可能需要调整。

如果以上方法仍无法解决问题,可能是由于Dialog的其他属性或内部布局影响所致。此时,建议检查Dialog的其他相关属性设置,或尝试调整内部布局结构。

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

回到顶部