HarmonyOS 鸿蒙Next升级Preview2及之后系统,Popup组件内容无法铺满屏幕宽度,左右均有8vp空白

发布于 1周前 作者 caililin 来自 鸿蒙OS

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 })
  }
} 

参考地址:https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/js-apis-promptAction.md#customdialogoptions11

更多关于HarmonyOS 鸿蒙Next升级Preview2及之后系统,Popup组件内容无法铺满屏幕宽度,左右均有8vp空白的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next升级至Preview2及之后的系统版本中,Popup组件内容未能铺满屏幕宽度,两侧均存在8vp(虚拟像素)空白的问题,通常是由于Popup组件的布局或样式设置不当导致的。

Popup组件的显示区域受其父容器或根布局的影响,若父容器设置了边距(padding)或内边距(margin),Popup的内容可能会相应地被限制。此外,Popup自身的布局属性,如widthleftright等,如果设置了固定值或相对值,也可能导致内容无法完全覆盖屏幕宽度。

检查并调整Popup组件的布局设置,确保其父容器没有设置影响内容宽度的边距或内边距。同时,检查Popup自身的宽度设置,确保它设置为match_parent或相应的全屏宽度值。此外,确认Popup的显示位置属性,如alignment_mode,确保其不是导致内容无法覆盖全屏的原因。

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

回到顶部