HarmonyOS 鸿蒙Next 网络图片固定高度 宽度自适应

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

HarmonyOS 鸿蒙Next 网络图片固定高度 宽度自适应

网络图片固定高度，宽度自适应

咨询场景描述：首页上导航，除了显示文字，还有显示图片的功能，图片需要固定高度，宽度自适应。

使用代码：
MyImageKnifeComponent({
photoUrl: detailCardModel.photo.thumb,
imageFit: ImageFit.Contain
})

.height(adapt(22))


更多关于HarmonyOS 鸿蒙Next 网络图片固定高度 宽度自适应的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
2 回复

参看文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V13/adaptive-layout-V13

示例代码 


  Flex(){

        Image($r("app.media.startIcon")).objectFit(ImageFit.Contain)

          .flexBasis('auto')

          .height(100)

          .backgroundColor(0xF5DEB3)

      }

我这边只是示例，您这边可以根据示例修改

引入网络图片需申请权限ohos.permission.INTERNET，


  Flex(){

       Image('https://www.example.com/example.JPG').objectFit(ImageFit.Contain)

          .flexBasis('auto')

          .height(100)

          .backgroundColor(0xF5DEB3)

      }

更多关于HarmonyOS 鸿蒙Next 网络图片固定高度 宽度自适应的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next系统中，若要实现网络图片固定高度且宽度自适应，可以通过以下步骤实现：

  1. 布局文件设置： 在XML布局文件中，为显示图片的组件（如Image）设置固定高度，并允许宽度自适应。例如：

    <Image
    ohos:id="$+id:image"
    ohos:width="match_parent"
    ohos:height="200vp"
    ohos:scale_mode="aspect_fit"/>

    其中ohos:height设置固定高度，ohos:width设置为match_parent使宽度自适应，ohos:scale_mode设置为aspect_fit保证图片按比例缩放，以适应固定高度。

  2. 代码设置图片资源： 在JavaScript代码中，通过URI加载网络图片。例如：

    let image = this.$element('image');
image.setPixelMap(new ImagePixelMap(new Uri('https://example.com/image.jpg')));

  3. 注意事项：

    • 确保网络图片URL有效且可访问。
    • 考虑到网络加载延迟，可添加加载状态提示。

通过以上步骤，HarmonyOS鸿蒙Next系统中的网络图片将能够保持固定高度且宽度自适应。如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html

回到顶部