HarmonyOS鸿蒙Next中使用promptAction.openCustomDialog弹出弹窗,为什么设置了圆角不生效?永远是直角?

HarmonyOS鸿蒙Next中使用promptAction.openCustomDialog弹出弹窗,为什么设置了圆角不生效?永远是直角?

效果如图:

Screenshot_20250711082253845.png

弹窗代码:

import * as pag from '@tencent/libpag'
import { PAGView } from '@tencent/libpag'
import { common } from '@kit.AbilityKit';
import { PromptActionClass } from './PromptActionClass';

@Component
export struct AIDialog {
@Prop text:string
  @State bgPagViewController: pag.PAGViewController = new pag.PAGViewController();
  @State xiaoshuPagViewController: pag.PAGViewController = new pag.PAGViewController();
  private context: common.UIAbilityContext = this.getUIContext().getHostContext() as common.UIAbilityContext;

  async aboutToAppear(): Promise<void> {
    let backgroundAnimationPath = this.context.resourceDir + "/bgAnimation.pag";
    // LoadFromPathAsync()可以加载网络或者本地文件
    let bgfile = await pag.PAGFile.LoadFromPathAsync(backgroundAnimationPath)
    this.bgPagViewController.setComposition(bgfile);
    this.bgPagViewController.setRepeatCount(0);
    this.bgPagViewController.play();

    let xiaoshufile = this.context.resourceDir + "/speak_bmp.pag";
    let file = await pag.PAGFile.LoadFromPathAsync(xiaoshufile)
    this.xiaoshuPagViewController.setComposition(file);
    this.xiaoshuPagViewController.setRepeatCount(0);
    this.xiaoshuPagViewController.play();
  }

  build() {
      RelativeContainer() {
        PAGView({
          controller: this.bgPagViewController
        })
          .alignRules({
            top: { anchor: "__container__", align: VerticalAlign.Top },
            bottom: { anchor: "__container__", align: VerticalAlign.Bottom },
            left: { anchor: "__container__", align: HorizontalAlign.Start },
            right: { anchor: "__container__", align: HorizontalAlign.End }
          })

        Column() {
          // 主要内容区域
          Row() {
            // 动画和文本的水平布局
            Row() {
              // 动画视图
              PAGView({ controller: this.xiaoshuPagViewController })
                .width(40)
                .height(40)
                .margin({ right: 12 })

              // 监听状态文本
              Text('小舒正在听...')
                .fontSize(14)
                .fontColor('#CCCCCC')
                .fontWeight(400)

            }
            .alignItems(VerticalAlign.Center)
            .justifyContent(FlexAlign.Start)

            Blank()

            // 右侧按钮区域
            Row() {
              // 设置按钮
              Text('设置')
                .fontSize(14)
                .fontWeight(400)
                .fontColor('#CCCCCC')
                .onClick(() => {
                  // 设置按钮点击事件
                })

              Divider()
                .vertical(true)
                .strokeWidth(1)
                .color('#FFFFFF')
                .margin({ left: 16, right: 12 })
                .height(10)

              // 关闭按钮
              Image($r('app.media.close'))
                .width(24)
                .height(24)
                .onClick(() => {
                  // 关闭按钮点击事件
                  PromptActionClass.closeDialog()
                })
            }
            .alignItems(VerticalAlign.Center)
          }
          .width('100%')
          .justifyContent(FlexAlign.SpaceBetween)
          .alignItems(VerticalAlign.Center)


          Text('可以试试对我说')
            .fontSize(14)
            .fontWeight(400)
            .fontColor('#CCCCCC')
            .margin({ top: 12 })

          Text('我在听你请说')
            .fontSize(20)
            .fontWeight(500)
            .fontColor('#FFFFFF')
            .margin({ top: 8 })
        }
        .width('100%')
        .padding({
          top: 16,
          bottom: 24,
          left: 16,
          right: 16
        })
        .alignItems(HorizontalAlign.Center)
        .alignRules({
          top: { anchor: "__container__", align: VerticalAlign.Top },
          bottom: { anchor: "__container__", align: VerticalAlign.Bottom },
          left: { anchor: "__container__", align: HorizontalAlign.Start },
          right: { anchor: "__container__", align: HorizontalAlign.End }
        })
      }
    .constraintSize({ minHeight: 72, maxHeight: 174 })
    .borderRadius(12)
    .margin({ left: 8, right: 8 })
  }
}
// Index.ets
import { ComponentContent } from '@kit.ArkUI';
import { AIDialog } from '../components/AIDialog';
import { PromptActionClass } from '../components/PromptActionClass';


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


@Builder
function buildText(param:Params) {
  AIDialog()
}


@Entry
@Component
struct Index {
  @State message: string = "hello";
  private ctx: UIContext = this.getUIContext();
  private contentNode: ComponentContent<Object> =
    new ComponentContent<Params>(this.ctx, wrapBuilder<[Params]>(buildText), new Params(this.message),);


  aboutToAppear(): void {
    PromptActionClass.setContext(this.ctx);
    PromptActionClass.setContentNode(this.contentNode);
    PromptActionClass.setOptions({ alignment: DialogAlignment.Top, offset: { dx: 0, dy: 50 } ,isModal:false});
  }


  build() {
    Row() {
      Column() {
        Button("open dialog ")
          .margin({ top: 50 })
          .onClick(() => {
            PromptActionClass.openDialog();
          })
      }
      .width('100%')
      .height('100%')
    }
    .height('100%')
  }
}

更多关于HarmonyOS鸿蒙Next中使用promptAction.openCustomDialog弹出弹窗,为什么设置了圆角不生效?永远是直角?的实战教程也可以访问 https://www.itying.com/category-93-b0.html

8 回复

是不是背景色的原因啊,你这个有点偏灰色的

更多关于HarmonyOS鸿蒙Next中使用promptAction.openCustomDialog弹出弹窗,为什么设置了圆角不生效?永远是直角?的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


结果:

![Screenshot_20250711111633899.png](https://alliance-communityfile-drcn.dbankcdn.com/FileServer/getFile/cmtybbs/818/923/229/0030086000818923229.20250711111811.46722828633910782788555537101401:50001231000000:2800:C1D672F07108B1D5465DE8E5717F8633F11F670883E166B0AF5560C149EA426C.png)
RelativeContainer() {
  Image($r('app.media.bg'))
    .alignRules({
      top: { anchor: '__container__', align: VerticalAlign.Top },
      left: { anchor: '__container__', align: HorizontalAlign.Start }
    })
    .width('90%') // 宽度小于容器,避免溢出
    .height('90%')
}
.borderRadius(20)
.backgroundColor('#F0F0F0')

试试吧  

找HarmonyOS工作还需要会Flutter的哦,有需要Flutter教程的可以学学大地老师的教程,很不错,B站免费学的哦:BV1S4411E7LY/?p=17

并不行,结果是这样,直角也依然在,

RelativeContainer() { Image($r(‘app.media.bgImage’)) .alignRules({ top: { anchor: ‘container’, align: VerticalAlign.Top }, left: { anchor: ‘container’, align: HorizontalAlign.Start } }) .width(‘90%’)

PAGView({ controller: this.bgPagViewController }) .alignRules({ top: { anchor: “container”, align: VerticalAlign.Top }, bottom: { anchor: “container”, align: VerticalAlign.Bottom }, left: { anchor: “container”, align: HorizontalAlign.Start }, right: { anchor: “container”, align: HorizontalAlign.End } })

Column() { Row() { Row() { PAGView({ controller: this.xiaoshuPagViewController }) .width(40) .height(40) .margin({ right: 12 })

    Text('小舒正在听...')
      .fontSize(14)
      .fontColor('#CCCCCC')
      .fontWeight(400)

  }
  .alignItems(VerticalAlign.Center)
  .justifyContent(FlexAlign.Start)

  Blank()

  Row() {
    Text('设置')
      .fontSize(14)
      .fontWeight(400)
      .fontColor('#CCCCCC')
      .onClick(() => {
        // 设置按钮点击事件
      })

    Divider()
      .vertical(true)
      .strokeWidth(1)
      .color('#FFFFFF')
      .margin({ left: 16, right: 12 })
      .height(10)

    Image($r('app.media.close'))
      .width(24)
      .height(24)
      .onClick(() => {
        // 关闭按钮点击事件
        PromptActionClass.closeDialog()
      })
  }
  .alignItems(VerticalAlign.Center)
}
.width('100%')
.justifyContent(FlexAlign.SpaceBetween)
.alignItems(VerticalAlign.Center)

Text('可以试试对我说')
  .fontSize(14)
  .fontWeight(400)
  .fontColor('#CCCCCC')
  .margin({ top: 12 })

Text('我在听你请说')
  .fontSize(20)
  .fontWeight(500)
  .fontColor('#FFFFFF')
  .margin({ top: 8 })

} .width(‘100%’) .padding({ top: 16, bottom: 24, left: 16, right: 16 }) .alignItems(HorizontalAlign.Center) .alignRules({ top: { anchor: “container”, align: VerticalAlign.Top }, bottom: { anchor: “container”, align: VerticalAlign.Bottom }, left: { anchor: “container”, align: HorizontalAlign.Start }, right: { anchor: “container”, align: HorizontalAlign.End } }) } .constraintSize({ minHeight: 72, maxHeight: 174 }) .borderRadius(12) .margin({ left: 8, right: 8 })

在HarmonyOS Next中,promptAction.openCustomDialog的圆角不生效可能由以下原因导致:

  1. 自定义弹窗的布局文件未正确设置背景形状
  2. 布局文件中可能被父容器样式覆盖
  3. 需要在XML中明确定义shape为corners并设置半径

检查自定义弹窗的布局文件,确保设置android:background为带圆角的drawable资源,例如:

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="20dp"/>
    <solid android:color="@color/white"/>
</shape>

同时确认未在代码中强制覆盖样式属性。

在HarmonyOS Next中,使用promptAction.openCustomDialog时设置的borderRadius不生效,通常是因为自定义弹窗的布局层级问题导致的。从代码看,您已经在AIDialog组件中设置了.borderRadius(12),但实际效果仍然是直角。

解决方案:需要确保在弹窗的最外层容器上同时设置borderRadiusclip(true)属性。修改AIDialog组件的build方法如下:

build() {
  RelativeContainer() {
    // 原有内容...
  }
  .borderRadius(12)
  .clip(true)  // 关键:添加clip属性
  .constraintSize({ minHeight: 72, maxHeight: 174 })
  .margin({ left: 8, right: 8 })
}

原因分析:

  1. 自定义弹窗默认会包裹一层系统容器,仅设置borderRadius而不设置clip会导致圆角被父容器裁剪。
  2. clip(true)属性确保子组件的圆角效果能够正确显示。
  3. 需要同时在外层容器和内容容器上都设置borderRadius才能确保全场景下生效。

如果仍不生效,可以尝试在PAGView外层再包裹一个Column/Row组件并设置相同的borderRadiusclip属性。

回到顶部