HarmonyOS鸿蒙Next中想让二维码显示在背景图片上面,但是Stack布局顶部二维码图片被遮挡问题
HarmonyOS鸿蒙Next中想让二维码显示在背景图片上面,但是Stack布局顶部二维码图片被遮挡问题 下面是代码,没法大佬看看:
Stack() {
Image('https://fxtp-ziyuan.oss-cn-shanghai.aliyuncs.com/app/health/fuxiangka/template/hei_2.png')
.objectFit(ImageFit.Contain)
RelativeContainer () {
Image('https://fxtp-ziyuan.oss-cn-shanghai.aliyuncs.com/app/health/fuxiangka/template/yuanquan.png')
.objectFit(ImageFit.Contain)
.width(selfLpx(40))
.height(selfLpx(40))
.alignRules({
'top': { 'anchor': '__container__', 'align': VerticalAlign.Top },
'right': { 'anchor': '__container__', 'align': HorizontalAlign.End },
})
.padding({top: selfLpx(15)})
Text('尊敬的用户')
.fontSize(17)
.fontWeight(FontWeight.Regular)
.fontColor(this.cardModel?.color)
.alignRules({
'bottom': { 'anchor': '__container__', 'align': VerticalAlign.Bottom },
'left': { 'anchor': 'rightIg', 'align': HorizontalAlign.Start },
})
.padding({bottom: selfLpx(15)})
Image('https://ecloudsitcdn.tppension.cntaiping.com/fxtpplatform/fxtpstatic/appimgs/fxk/a3df25ecc13b4e609ec0fd102fe0fa98.png')
.objectFit(ImageFit.Fill)
.width(selfLpx(106))
.height(selfLpx(106))
.alignRules({
'center': { 'anchor': '__container__', 'align': VerticalAlign.Center },
'right': { 'anchor': '__container__', 'align': HorizontalAlign.End },
})
.margin({right: selfLpx(10)})
}
.width('100%')
.height(selfLpx((375-24*2)*203/327))
.padding({
left: selfLpx(20),
right: selfLpx(20)
})
.onClick(() => {
this.isOverturn = !this.isOverturn
})
}
.width('100%')
.height(selfLpx((375-24*2)*203/327))
.padding({
left: selfLpx(20),
right: selfLpx(20)
})
更多关于HarmonyOS鸿蒙Next中想让二维码显示在背景图片上面,但是Stack布局顶部二维码图片被遮挡问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
参考下文档,使用zIndex设置下堆叠的顺序
https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-z-order-V5#zindex
二维码背景图不是白色,可以在给图片生成的时候给予背景色,或者加个底板背景
import router from '[@ohos](/user/ohos).router';
import { MainPage2 } from 'testhar2';
[@Entry](/user/Entry)
[@Component](/user/Component)
struct SearchSwiperPage {
[@State](/user/State) message: string = 'Hello World';
build() {
Column() {
Stack() {
// Image(this.cardModel?.title)
Image($r('app.media.hei_2'))
.objectFit(ImageFit.Contain)
RelativeContainer() {
// Image(this.cardModel?.subtitle)
Image('https://fxtp-ziyuan.oss-cn-shanghai.aliyuncs.com/app/health/fuxiangka/template/yuanquan.png')
.objectFit(ImageFit.Contain)
.width(40)
.height(40)
.alignRules({
'top': { 'anchor': '__container__', 'align': VerticalAlign.Top },
'right': { 'anchor': '__container__', 'align': HorizontalAlign.End },
})
.padding({ top: 15 })
// Text(this.isAutonym?UserDataStore.getUserRealName():'尊敬的用户')
Text('尊敬的用户')
.fontSize(17)
.fontWeight(FontWeight.Regular)// .fontColor(this.cardModel?.color)
.alignRules({
'bottom': { 'anchor': '__container__', 'align': VerticalAlign.Bottom },
'left': { 'anchor': 'rightIg', 'align': HorizontalAlign.Start },
})
.padding({
bottom: 15
})
// Image(this.happinessCode)
Column() {
Image($r('app.media.erweima'))
.objectFit(ImageFit.Fill)
.width(106)
.height(106)
.margin({"top":6})
}
.backgroundColor(Color.White)
.width(120)
.height(120)
.alignRules({
'center': { 'anchor': '__container__', 'align': VerticalAlign.Center },
'right': { 'anchor': '__container__', 'align': HorizontalAlign.End },
})
.margin({
right: 10
})
// .backgroundColor('#F2F5F7')
}
.width('100%')
.height((375 - 24 * 2) * 203 / 327)
.padding({
left: 20,
right: 20
})
.onClick(() => {
// this.isOverturn = !this.isOverturn
})
}
.width('100%')
.height((375 - 24 * 2) * 203 / 327)
.padding({
left: 20,
right: 20
})
}
}
}
更多关于HarmonyOS鸿蒙Next中想让二维码显示在背景图片上面,但是Stack布局顶部二维码图片被遮挡问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
在HarmonyOS鸿蒙Next中,使用Stack布局时,默认情况下后添加的子组件会覆盖在先添加的子组件之上。若想让二维码显示在背景图片上面但被遮挡,可通过调整zIndex
属性来控制组件的层级。将二维码组件的zIndex
设置为大于背景图片的值即可。例如:
Stack() {
Image($r('app.media.background')) // 背景图片
.zIndex(1)
Image($r('app.media.qrcode')) // 二维码图片
.zIndex(2)
}
确保二维码组件的zIndex
高于背景图片,即可使其显示在背景之上。
在HarmonyOS鸿蒙Next中,使用Stack
布局时,默认后添加的组件会覆盖在先添加的组件上。要让二维码显示在背景图片上方,确保二维码组件在布局中后于背景图片添加。例如:
<Stack>
<Image src="background.png" /> <!-- 背景图片 -->
<Image src="qr_code.png" /> <!-- 二维码图片 -->
</Stack>
这样,二维码图片会显示在背景图片的上方。如果仍被遮挡,检查是否有其他布局或样式覆盖了二维码组件。