HarmonyOS 鸿蒙Next升级Preview2及之后系统,Popup组件内容无法铺满屏幕宽度,左右均有8vp空白
HarmonyOS 鸿蒙Next升级Preview2及之后系统,Popup组件内容无法铺满屏幕宽度,左右均有8vp空白
升级Preview2及之后系统,Popup组件中的内容无法铺满屏幕宽度(设置的width为100%),实际显示左右均有8vp的空白
2 回复
目前popup组件当前的规格就是popup距离屏幕左右会有几vp的一个避让,这边推荐使用opencustomdialog来实现后续会支持弹出动画自定义。
可以参考如下demo:
import { BusinessError } from '@ohos.base';
import { ComponentContent } from "@ohos.arkui.node";
class Params {
text: string = ""
constructor(text: string) {
this.text = text;
}
}
[@Builder](/user/Builder)
function buildText(params: Params) {
Column() {
Text(params.text)
.fontSize(50)
.fontWeight(FontWeight.Bold)
.margin({ bottom: 36 })
.fontColor('#A974A8')
}.backgroundColor('#2B2B2B')
}
[@Entry](/user/Entry)
[@Component](/user/Component)
struct Index {
[@State](/user/State) message: string = "hello";
[@State](/user/State) list: Array<number> = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19];
[@State](/user/State) numberArray: Array<boolean> = new Array(this.list.length).fill(false);
[@State](/user/State) currentItem:number = 0;
build() {
Column() {
List() {
ForEach(this.list, (item: number, index: number) => {
ListItem() {
Row() {
Text('第' + item + '个')
Button("click me")
.onClick((event:ClickEvent)=>{
let uiContext = this.getUIContext();
let promptAction = uiContext.getPromptAction();
let contentNode =
new ComponentContent(uiContext, wrapBuilder(buildText), new Params(item.toString()));
try {
promptAction.openCustomDialog(contentNode, {
maskColor: Color.Transparent,
});
} catch (error) {
let message = (error as BusinessError).message;
let code = (error as BusinessError).code;
console.error(`OpenCustomDialog args error code is ${code}, message is ${message}`);
}
try {
promptAction.updateCustomDialog(contentNode, {
alignment: DialogAlignment.TopStart,
maskColor: Color.Transparent,
offset: { dx: event.displayX, dy: event.displayY}
});
} catch (error) {
let message = (error as BusinessError).message;
let code = (error as BusinessError).code;
console.error(`updateCustomDialog args error code is ${code}, message is ${message}`);
}
})
}
.width('100%')
.height(100)
.borderRadius(10)
.backgroundColor(0xFFFFFF)
.justifyContent(FlexAlign.SpaceBetween)
}
})
}
.width('90%')
.listDirection(Axis.Vertical) // 排列方向
.scrollBar(BarState.Off)
.friction(0.6)
.divider({
strokeWidth: 2,
color: 0xFFFFFF,
startMargin: 20,
endMargin: 20
}) // 每行之间的分界线
.edgeEffect(EdgeEffect.Spring) // 边缘效果设置为Spring
}
.width('100%')
.height('100%')
.backgroundColor(0xDCDCDC)
.padding({ top: 5 })
}
}
更多关于HarmonyOS 鸿蒙Next升级Preview2及之后系统,Popup组件内容无法铺满屏幕宽度,左右均有8vp空白的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html