HarmonyOS 鸿蒙Next 有没有类似安卓的自定义图片 layered_image.json文件中能否/如何设置多张图片的层叠布局及属性 或在其他哪个文件中设置自定义图片

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

HarmonyOS 鸿蒙Next 有没有类似安卓的自定义图片 layered_image.json文件中能否/如何设置多张图片的层叠布局及属性 或在其他哪个文件中设置自定义图片

startWindowIcon无法达到多设备的页面自适应布局，设置一个mate60尺寸的图片做启动图标，在2in1里横屏竖屏都没问题，但在单屏机横屏会丢失一些图标，因为它默认是剧中的，撑出的部分不显示。

所以想通过闪屏达到启动页效果。
entyrability的onWindowStageCreate里设置闪屏：

const  BUNDLE: string = 'com.example.logan’
const  SPLASH_URL:string=@bundle:${BUNDLE}/entry/ets/pages/Splash
const win = await windowStage.createSubWindow(‘win’)
await win.showWindow()
win.setUIContent(SPLASH_URL)

但闪屏是一个单独页面，它的跳转主页面时间人为设置的，很不规范。虽然能做到设备自适应布局，但是startWindowIcon依然不可避免的在运行，如果startWindowIcon设置为前景色图片，那么打开应用时会先加载startWindowIcon，这段时间属于白屏，然后才会跳转闪屏部分，这耽误太长时间，而且白屏效果并不好，影响用户体验。
 

最终想到，能否像安卓里面一样，做个自定义层叠布局的图片，在里面可以做图片布局属性，然后startWindowIcon引用这个自定义布局的图片达到多设备页面自定义布局，目前看到的类似于自定义布局的图片文件为layered_image.json

{
  “layered-image”:
  {
    “background” : “$media:background”,
    “foreground” : “$media:foreground”
  }
}

不知道这个怎么去设置自定义布局属性，或者说有其他自定义图频布局的文件？
或者说这个思路是错的，那么有没有其他可以解决问题的办法呢？
求教！！！


更多关于HarmonyOS 鸿蒙Next 有没有类似安卓的自定义图片 layered_image.json文件中能否/如何设置多张图片的层叠布局及属性 或在其他哪个文件中设置自定义图片的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
5 回复
startWindowIcon 针对不同分辨率，设置不同的全屏图片即可，可参考京东

更多关于HarmonyOS 鸿蒙Next 有没有类似安卓的自定义图片 layered_image.json文件中能否/如何设置多张图片的层叠布局及属性 或在其他哪个文件中设置自定义图片的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


哥，京东在next上不支持横竖屏切换啊，如果不支持横屏切换，正常显示貌似不影响，但针对不同分辨率设置不同全屏图片怎么做到的哈，在哪里配置的呢

新建resources目录 可以设置不同横竖屏、设备类型的目录：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V13/resource-categories-and-access-V13#%E5%88%9B%E5%BB%BA%E8%B5%84%E6%BA%90%E7%9B%AE%E5%BD%95%E5%92%8C%E8%B5%84%E6%BA%90%E6%96%87%E4%BB%B6

多谢老哥解惑，已实现部分预期效果，但并没有完整解决问题。 刚刚测试了，测试真机mate60，在startWindowIcon里默认调用vertical_phone内图片，横屏旋转，startWindowIcon并不调用horizontal_phone内图片，还是vertical_phone内图片；但在页面内包括闪屏，都能正常调用图片，我竖屏就调用vertical_phone内图片，横屏就调用horizontal_phone内图片。 当切换Mate X5测试真机，startWindowIcon仍然调用vertical_phone内图片，并没有达到调用vertical_2in1内图片的预期，在横屏展示时，也仍然调用的是vertical_phone内图片；在页面UI包括闪屏阶段调用的图片资源，在水平时是horizontal_phone，垂直时是vertical_phone。 没有tablet真机，所以用的虚拟机，虚拟机startWindowIcon无论横屏竖屏，调用的都是horizontal_tablet内图片，在页面UI包括闪屏阶段调用的图片资源，在水平时是horizontal_tablet，垂直时是vertical_tablet。 总结： phone/2in1的startWindowIcon默认调用vertical_phone，tablet默认调用horizontal_tablet phone/2in1的 UI 调用vertical_phone/horizontal_phone，tablet调用vertical_tablet/horizontal_tablet

并没有达到完整的效果，尤其是在phone：真机mate60中横屏展示时并没有调用vertical_phone内相应图片，也就意味着我的startWindowIcon如果内容多一点就会展示不全

HarmonyOS 鸿蒙Next 支持自定义图片层叠布局及属性，但与安卓的实现方式有所不同。在鸿蒙系统中，你可以通过配置文件和代码结合的方式来设置图片的层叠布局及属性。

在鸿蒙的UI描述文件（例如.json文件）中，虽然不直接支持layered_image.json这样的命名和特定格式来定义多层图片，但你可以利用<stack>组件来实现图片的层叠布局。<stack>组件允许你将多个子组件（包括图片）按照指定的顺序堆叠在一起。

要在.json文件中设置图片的层叠布局，你可以这样做：

{
  "type": "stack",
  "children": [
    {
      "type": "image",
      "src": "path/to/image1",
      "attributes": {
        // 图片属性，如宽度、高度、透明度等
      }
    },
    {
      "type": "image",
      "src": "path/to/image2",
      "attributes": {
        // 图片属性，如宽度、高度、透明度等
      }
    }
    // 更多图片层
  ]
}

图片的属性可以在attributes中设置，包括尺寸、位置、透明度等。对于更复杂的布局和动态效果，建议在JavaScript代码中通过API进行进一步设置。

如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html

回到顶部