HarmonyOS 鸿蒙Next Image 组件怎么像android的一样指定位置拉伸

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

HarmonyOS 鸿蒙Next Image 组件怎么像android的一样指定位置拉伸

使用了Image的
.resizable({
slice: {
left: this.left,
right: this.right,
top: this.top,
bottom: this.bottom
}
})

感觉不是这个效果，想要的是指定位置拉伸 其它位置 

Harmonyos Next教程
2 回复
当前Image对于点九图的使用是给Image组件设置resizable属性，达到图片局部拉伸的效果

参考文档：Image-图片与视频-ArkTS组件-ArkUI（方舟UI框架）-应用框架 - 华为HarmonyOS开发者

只有当bottom和right同时大于0时，slice属性才生效，图像左右拉伸时，设置right和left到合适的值即可

Image($r(‘app.media.bg_ui_nav_search_box’))

.width(‘100%’)


.height(60)


.resizable({ slice: { bottom: 1, right: 10, left: 10} })

更多关于HarmonyOS 鸿蒙Next Image 组件怎么像android的一样指定位置拉伸的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS（鸿蒙）系统中，Next Image 组件可以通过布局参数来指定位置并进行拉伸。不同于Android中的具体实现方式，鸿蒙使用其独特的布局和组件机制。

要在鸿蒙中指定Next Image组件的位置并进行拉伸，可以使用以下步骤：

  1. 布局文件：在XML布局文件中定义Next Image组件，并使用相应的布局属性（如ohos:left_margin、ohos:top_margin等）来设置位置。

  2. 宽度和高度：设置Next Image组件的ohos:width和ohos:height属性为match_parent或具体的dp值来实现拉伸。例如，ohos:width="match_parent"将使组件宽度与其父容器一致。

  3. 对齐方式：使用ohos:layout_alignment属性来指定组件在其父容器中的对齐方式，可以是左对齐、右对齐、顶部对齐、底部对齐等。

  4. 缩放类型：如果希望图像内容按照特定方式拉伸（如保持纵横比），可以通过设置Next Image组件的ohos:image_scale_type属性来实现。

示例代码：

<ohos:Image
    ohos:id="$+id:my_image"
    ohos:width="match_parent"
    ohos:height="200vp"
    ohos:left_margin="16vp"
    ohos:top_margin="16vp"
    ohos:image_scale_type="center_crop"
    ohos:src="$media:my_image"/>

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

回到顶部