HarmonyOS 鸿蒙Next弹窗高度问题

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

HarmonyOS 鸿蒙Next弹窗高度问题 目前自定义弹窗，在写高度的时候必须设定一个高度，不然就默认为屏幕的高度，这样写的话，整体弹窗的高度不能自适应弹窗中的子组件高度。弹窗高度无法自适应，应该如何处理

Harmonyos Next教程
3 回复

您可以参考此demo：

弹窗的高度根据里面组件的高度变化

import { BusinessError } from '@kit.BasicServicesKit';
import { ComponentContent } from '@kit.ArkUI';

class Params {
  text: string = "";
  constructor(text: string) {
    this.text = text;
  }
}

@Builder
function buildText(params: Params) {
  Column() {
    Text(params.text)
      .fontSize(50)
      .fontWeight(FontWeight.Bold)
  }.backgroundColor('#FFF0F0F0')
}

@Entry
@Component
struct Index {
  @State message: string = "hello"
  build() {
    Row() {
      Column() {
        Button("click me")
          .onClick(() => {
            let uiContext = this.getUIContext();
            let promptAction = uiContext.getPromptAction();
            let contentNode = new ComponentContent(uiContext, wrapBuilder(buildText), new Params(this.message));
            try {
              promptAction.openCustomDialog(contentNode);
            } 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}`);
            };
          })
          .width('100%')
          .height('100%')
      }
    }
    .height('100%')
  }
}

是的，这是弹窗自定义的渲染内容：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-arkui-uicontext-V5#opencustomdialog12

更多关于HarmonyOS 鸿蒙Next弹窗高度问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


dialogController: CustomDialogController = new CustomDialogController({ builder: CustomContentDialog({ primaryTitle: ‘付费须知’, contentBuilder: () => { this.buildContent(true); }, }), });


我看到高度是自适应的呢

针对HarmonyOS（鸿蒙）Next弹窗高度问题，这里提供具体的解决方案：

在HarmonyOS开发中，弹窗（Dialog）的高度通常由布局文件和内容决定。如果希望自定义弹窗的高度，可以通过以下几种方式实现：

  1. 布局文件调整：

    • 修改弹窗的布局文件，通过调整内部组件的高度属性来改变弹窗的整体高度。例如，在XML布局文件中，为根布局或内部组件设置android:layout_height属性为具体值或使用wrap_content/match_parent。

  2. 代码动态设置：

    • 在弹窗创建后，通过代码动态设置其高度。这通常涉及到获取弹窗的根视图，并调用相应的方法设置高度。注意，这种方式可能需要对视图树进行测量和布局操作，以确保新高度生效。

  3. 使用鸿蒙特有的API：

    • 鸿蒙系统提供了丰富的UI组件和布局管理API，可能包含直接设置弹窗高度的特定方法。查阅鸿蒙开发文档，了解是否有相关的API可以直接使用。

  4. 弹窗样式配置：

    • 检查是否有全局或局部的弹窗样式配置影响了高度。在鸿蒙中，样式配置通常位于主题或样式文件中，可以通过修改这些文件来调整弹窗的默认高度。

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

回到顶部