目录

Image组件设置aspectRatio后宽度无法充满

问题现象

在Column内放置Image组件，给Image组件同时设置aspectRatio、margin、width属性，但图片设置的width属性不生效。

问题代码如下：

@Entry
@Component
struct Index {


  build() {
    Column() {
      Image($r('app.media.startIcon'))
        .width('100%')
        .aspectRatio(2)
        .objectFit(ImageFit.Cover)
        .margin({ top: 100 })
    }.width('100%').height(300)
  }
}

解决方案

线性布局在给子组件设置margin值时，子组件的高度就是本身的高度加上margin的高度，指定了aspectRatio后，为了保持宽高比，Column的宽度会根据aspectRatio宽高比重新计算。