HarmonyOS Image 在List中自适应大小失败

在List中,有很多的ListItem,listItem横向排布,其中一个元素是Image,Image高度20,宽度根据加载的图片自适应宽度,加载的图片有根据类型判断有本地的,有网络加载的。请问怎么可以让Image的根据图片的宽度自适应大小,现在的自适应大小有问题。

HarmonyOS
2024-10-21 12:35:41
浏览
收藏 0
回答 1
回答 1
按赞同
/
按时间
Heiang

layoutWeight需要设置在自适应宽度的Image上,表示占据主轴剩余空间的100%。objectFit使用ImageFit.Fill,不保持宽高比进行放大缩小,使得图片充满显示边界,如果需要保持比例则可以使用其他枚举值。

build() {  
  Row(){  
    Image($r('app.media.icon'))  
      .height('vp')  
      .width('14vp')  
      .margin({ left: '16vp', top: '20vp', bottom: '20vp' })  
    Image($r('app.media.product002'))  
      .height('20vp')  
      .margin({ left: '8vp' })  
      .width('100%')  
      .objectFit(ImageFit.Fill)  
      .layoutWeight(1)  
    Image($r('app.media.preview'))  
      .height('20vp')  
      .width('20vp')  
      .margin({ left: '4vp' })  
    Text('123123')  
      .height('20vp')  
    Image($r('app.media.icon'))  
      .width('20vp')  
      .height('20vp')  
      .margin({ right: '16vp' })  
  }.width('100%')  
  .alignItems(VerticalAlign.Center)  
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
分享
微博
QQ
微信
回复
2024-10-21 17:28:54
相关问题
HarmonyOS List高度根据内容自适应
1019浏览 • 1回复 待解决
弹窗大小如何改为自适应
1437浏览 • 1回复 待解决
HarmonyOS image加载图片宽高自适应
985浏览 • 1回复 待解决
HarmonyOS List是否可以设置自适应高度
639浏览 • 1回复 待解决
HarmonyOS Image如何设置内容宽度自适应
890浏览 • 1回复 待解决
自定义弹窗大小如何自适应内容
3250浏览 • 1回复 待解决
List水平布局如何根据内容自适应高度
1528浏览 • 1回复 待解决
HarmonyOS Text无法自适应
607浏览 • 1回复 待解决
HarmonyOS RichText自适应高度
746浏览 • 1回复 待解决