HarmonyOS鸿蒙Next中想让二维码显示在背景图片上面,但是Stack布局顶部二维码图片被遮挡问题

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

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

3 回复

参考下文档,使用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>

这样,二维码图片会显示在背景图片的上方。如果仍被遮挡,检查是否有其他布局或样式覆盖了二维码组件。

回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!