HarmonyOS鸿蒙Next中如何解决Column无法自适应背景图片大小的问题

【问题现象】

在Column容器中添加Image组件时，设置auto属性无法使容器大小跟随图片尺寸变化。

期望达成的效果如图1，实际效果如图2：

问题代码如下：

build() {
  Column(){
    Image($r('app.media.image'))
  }.overlay(this.getBuilder())//在图片之上添加浮层
}

@Builder
getBuilder(){
  Column(){
      ......
  }
  .width('100%')
  .height('auto')
}

【背景知识】

• createImageSource：创建图片源示例，获取图片数据。
• Stack容器：堆叠容器，子组件按照顺序依次入栈，后一个子组件可以覆盖到前一个子组件上。
• fitOriginalSize属性：图片尺寸随图源尺寸变化。

【定位思路】

根据上述问题现象，可以从修改容器大小或是修改图片属性两种方式进行思考：

1. 固定容器尺寸容器

   先获取图片宽高尺寸，对应尺寸设置容器大小，即可将容器与图片大小保持一致。

2. 使用堆叠容器

   将Image组件作为背景放在最下方，其余组件叠在Image组件上方，设置Image组件属性，使图片尺寸跟随容器变化。

【解决方案】

根据上述思路，详细的解决方案如下：

**方案1：**先获取到图片宽高尺寸之后，再去设置容器Column的尺寸，使Column容器和图片尺寸大小一致。

// 获取图片尺寸
getContext(this).resourceManager.getMediaContent($r('app.media.background')).then((data)=>{
  let arrayBuffer=data.buffer.slice(data.byteOffset,data.byteLength+data.byteOffset)
  let imageSource = image.createImageSource(arrayBuffer)
  imageSource.getImageInfo(0,(error:BusinessError,imageInfo:image.ImageInfo)=>{
    if(error){
      console.error(`Failed to obtain,${error.code},message:${error.message}`)
    }else {
      this.imageHeight = imageInfo.size.height;
      this.imageWidth = imageInfo.size.width;
      console.info(`Succeeded in obtaining ,height:${imageInfo.size.height},width:${imageInfo.size.width}`)
    }
  })
})

// 设置容器宽高
Column(){
  ......
}.width(this.imageHeight).height(this.Width)

**方案2：**创建堆叠容器，添加Image组件，这样其他组件堆叠在Image组件上，就可以将Image组件作为背景，然后设置Image图片的fitOriginalSize属性，使图片尺寸跟随容器变化，从而达到期望的效果。

Column() {
  Stack() {
    // 将图片堆叠在最底层，作为背景
    Image($r('app.media.image2'))
      // 图片的显示尺寸跟随图源尺寸大小
      .fitOriginalSize(true)
    Column(){
      ......
    }
  }.align(Alignment.Top)
}