HarmonyOS 鸿蒙Next 自定义的Dialog,如何不在左右两侧留边距,直接填满屏幕宽度呢
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