HarmonyOS 鸿蒙Next 弹窗背景颜色的设置

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

HarmonyOS 鸿蒙Next 弹窗背景颜色的设置

超出容器显示，现在有两个问题
1. customDialog 设置 backgroundColor 没有生效（我设置了内容器的背景色, Color.Transparent 无效）
2. 如何能做到元素超出容器的显示，我想要的效果是截图上边黑色的边框透明

Harmonyos Next教程
2 回复

参考下这个demo:

import { ComponentContent } from '@kit.ArkUI';
import { BusinessError } from '@kit.BasicServicesKit';
[@Builder](/user/Builder)
function  buildText() {
  Column() {
    Stack({alignContent:Alignment.Top}){
      Column(){
      }.width('100%').height('100%').margin({top:50}).backgroundColor('#3499DD').borderRadius(10)
      Image($r('app.media.startIcon')).width(80).height(80).borderRadius(40)
    }
  }
  .width('100%')
  .height('100%')
  .backgroundColor(Color.Black)
  .borderRadius(10)
}
[@Entry](/user/Entry)
[@Component](/user/Component)
struct Parent {
  build() {
    Column() {
      Column(){
        Button("click").onClick(()=>{
          let uiContext = this.getUIContext();
          let promptAction = uiContext.getPromptAction();
          let contentNode = new ComponentContent((uiContext as UIContext), wrapBuilder(buildText));
          try {
            promptAction.openCustomDialog(contentNode,{
              alignment:DialogAlignment.BottomStart,
              transition:TransitionEffect.move(TransitionEdge.BOTTOM)
            });
          } 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}`);
          };
        })
      }
    }
  }
}
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

更多关于HarmonyOS 鸿蒙Next 弹窗背景颜色的设置的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS 鸿蒙Next系统中，设置弹窗（Dialog）背景颜色的方法主要依赖于使用XML布局文件或者通过编程方式直接设置弹窗组件的背景属性。

  1. XML布局文件设置： 在定义弹窗内容的XML布局文件中，可以为根布局元素（如LinearLayout、RelativeLayout等）设置android:background属性。例如：

    <LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:background="@color/your_custom_color">
    <!-- 弹窗内容 -->
</LinearLayout>

  2. 编程方式设置： 在创建弹窗并设置其内容后，可以通过代码直接设置背景颜色。例如：

    Dialog dialog = new AlertDialog.Builder(context)
    .setView(yourLayout)  // 设置你的布局
    .create();
Window window = dialog.getWindow();
if (window != null) {
    window.setBackgroundDrawable(new ColorDrawable(Color.parseColor("#YOUR_COLOR_CODE")));
}
dialog.show();

    注意：上述代码段中虽包含Java代码，但此处仅作为说明背景设置方式，实际在鸿蒙系统中，应使用鸿蒙的UI框架相关API。

在鸿蒙系统中，直接使用对应鸿蒙UI框架的API替换上述Java代码中的Android部分即可。如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html

回到顶部