鸿蒙中图片填充效果演示

图片填充 objectfit 是他的属性  参数类型 lmagefit 

属性有三种 每一种 对应不同的效果 下面我们来一起看一下

Contain ：图片宽或者缩放到组件尺寸相同则停止缩放，可能会导致组件有空白（等比例缩放）

Cover：默认效果，图片缩放到完全覆盖组件范围，可能导致图片显示不完整（等比例缩放）

fill：图片缩放至充满组件（不等比例缩放）

下面我们用代码演示来看一下不同状态下的效果~~~

第一种   Contain 

第二种 Cover

第三种  fill

下面是代码需要看效果的同学可以自行复制~~~  注意我这里使用的编辑器是  DevEco Studio

@Entry
@Component
struct Index {
  @State message: string = '帅峰';

  build() {
    Column() {
      Row() {
        // 图片填充
        Image($r('app.media.gg'))
          .height(200)
          .width('100%')
          .backgroundColor(Color.Pink)// .objectFit(ImageFit.Contain)  // 留白 会导致图片显示不完整
            // .objectFit(ImageFit.Contain)
            // .objectFit(ImageFit.Cover) // 图片铺满，但是会导致图片显示不完整
          .objectFit(ImageFit.Fill) // 图片充满 整个组件 （不等比例缩放）
      }
    }
    .width('100%')
  }
}

@Entry
@Component
struct Index {
  @State message: string = '哥哥伟大无需多盐';

  build() {
    Column() {
      Row() {
        // 图片填充
        Image($r('app.media.gg'))
          .height(200)
          .width('100%')
          .backgroundColor(Color.Pink)// .objectFit(ImageFit.Contain)  // 留白 会导致图片显示不完整
            // .objectFit(ImageFit.Contain)
            // .objectFit(ImageFit.Cover) // 图片铺满，但是会导致图片显示不完整
          .objectFit(ImageFit.Fill) // 图片充满 整个组件 （不等比例缩放）
      }
    }
    .width('100%')
  }
}