如何用 QRCode 组件生成带有 Logo 的二维码？

Question

我看到一些二维码中间有一个小 Logo，看起来非常好，我想用鸿蒙的 QRCode 组件来实现类似的效果，但是不太确定如何加入 Logo。有人知道如何实现二维码中间带 Logo 的效果吗？希望能有代码展示给我看一下。

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 1

QRCode 组件本身不直接支持嵌入 Logo，但可以通过布局方式将 Logo 图片叠加到二维码的中央位置来实现类似效果。

代码示例：

<div style="position: relative; width: 200px; height: 200px;">
  <QRCode value="https://www.example.com" style="width: 200px; height: 200px;"></QRCode>
  <Image src="common/images/logo.png" style="width: 50px; height: 50px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);"></Image>
</div>

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。