HarmonyOS鸿蒙Next中【快应用】让背景图完美无“缺”

HarmonyOS鸿蒙Next中【快应用】让背景图完美无“缺”

【关键字】 快应用、背景图显示部分

【问题背景】 快应用中在给组件设置后背景图的时候，背景图不能全部展示，只有展示了部分，该如何处理？

代码：

<div class="container">
  <div class="item-container">
    <text class="txt">测试文字</text>
  </div>
</div>

.container {
  flex: 1;
  flex-direction: column;
}
.item-container {
  margin-top: 50px;
  margin-right: 60px;
  margin-left: 60px;
  flex-direction: column;
}
.txt {
  width: 150px;
  height: 150px;
  color: #d81616;
  background-image: url(/Common/logo.png);
}

【问题分析】 此问题是因为minPlatformVersion 设置的高于等于1080导致的，这是1080新增的规范，设置background-image的同时还要设置下background-size为100%，背景图片才能完全显示出来。

【解决方案】 两种方法可以解决此问题。

  1. 如果用1080+以上的特性可以将manifest.json文件里的minPlatformVersion设置的低于1080就可以全部展示。

    "minPlatformVersion": 1075,

  2. 保持minPlatformVersion不变，设置background-image的同时还要设置下background-size为100%，也可全部展示背景图。

    .txt {
  width: 150px;
  height: 150px;
  color: #d81616;
  background-image: url(/Common/logo.png);
  background-size: 100%;
}

截图： cke_7771.png


更多关于HarmonyOS鸿蒙Next中【快应用】让背景图完美无“缺”的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于HarmonyOS鸿蒙Next中【快应用】让背景图完美无“缺”的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，快应用的背景图可以通过以下方式实现完美无“缺”：

  1. 使用自适应布局：确保背景图能够根据屏幕尺寸自动调整，避免拉伸或压缩导致的失真。
  2. 设置背景图属性：在布局文件中，使用background属性设置背景图，并选择centerCrop或fitXY等模式，确保图片完整显示。
  3. 优化图片资源：提供多分辨率的图片资源，确保在不同设备上都能清晰显示。
  4. 使用矢量图：优先使用矢量图（如SVG），避免因缩放导致的模糊或失真。

通过这些方法，可以确保快应用的背景图在各种设备上都能完美显示，提升用户体验。

回到顶部