HarmonyOS鸿蒙Next中使用promptAction.openCustomDialog弹出弹窗,为什么设置了圆角不生效?永远是直角?
HarmonyOS鸿蒙Next中使用promptAction.openCustomDialog弹出弹窗,为什么设置了圆角不生效?永远是直角?
效果如图:
弹窗代码:
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
是不是背景色的原因啊,你这个有点偏灰色的
更多关于HarmonyOS鸿蒙Next中使用promptAction.openCustomDialog弹出弹窗,为什么设置了圆角不生效?永远是直角?的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
结果:

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
的圆角不生效可能由以下原因导致:
- 自定义弹窗的布局文件未正确设置背景形状
- 布局文件中可能被父容器样式覆盖
- 需要在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)
,但实际效果仍然是直角。
解决方案:需要确保在弹窗的最外层容器上同时设置borderRadius
和clip(true)
属性。修改AIDialog
组件的build
方法如下:
build() {
RelativeContainer() {
// 原有内容...
}
.borderRadius(12)
.clip(true) // 关键:添加clip属性
.constraintSize({ minHeight: 72, maxHeight: 174 })
.margin({ left: 8, right: 8 })
}
原因分析:
- 自定义弹窗默认会包裹一层系统容器,仅设置
borderRadius
而不设置clip
会导致圆角被父容器裁剪。 clip(true)
属性确保子组件的圆角效果能够正确显示。- 需要同时在外层容器和内容容器上都设置
borderRadius
才能确保全场景下生效。
如果仍不生效,可以尝试在PAGView
外层再包裹一个Column/Row
组件并设置相同的borderRadius
和clip
属性。