如何根据API版本动态增加Image组件的属性
=======================

#### 问题现象

如何根据不同的API版本动态设置Image组件的属性？如：orientation属性在API 14及以上版本上生效，如何动态添加此属性？

#### 背景知识

*   [deviceInfo (设备信息)](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-device-info)：获取终端设备信息，其中sdkApiVersion表示系统软件API版本。
*   [attributeModifier](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-attribute-modifier#attributemodifier)：动态属性设置，支持开发者在属性设置时使用if/else语法，且根据需要使用多态样式设置属性。

#### 解决方案

可以通过获取[deviceInfo.sdkApiVersion](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-device-info#常量)判断当前系统的API版本再使用[动态属性](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-attribute-modifier#attributemodifier)设置需要的属性，如：

为Image组件设置attributeModifier动态属性：

import { deviceInfo } from '@kit.BasicServicesKit';


@Entry
@Component
struct Index {
  @State modifierImg: ImageModifier = new ImageModifier();


  aboutToAppear(): void {
  _  // 设置动态属性判断的API版本_
    this.modifierImg.sdkApiVersionInfo = deviceInfo.sdkApiVersion;
  }


  build() {
    Flex({justifyContent: FlexAlign.Center}) {
    _  // 加载的图片请替换为实际项目所需图片资源_
      Image($r('app.media.img'))
        .width(100)
        .height(100)
        .draggable(true)
        .attributeModifier(this.modifierImg)
    }
  }
}

通过判断API版本动态设置orientation属性：

export class ImageModifier implements AttributeModifier<ImageAttribute> {
  _// 可以实现一个Modifier，定义私有的成员变量，外部可动态修改_
  sdkApiVersionInfo: number = 12;
  applyNormalAttribute(instance: ImageAttribute): void {
    if (deviceInfo.sdkApiVersion >= 14) { _// 支持业务逻辑实现_
    _  // 属性变化触发apply函数时，变化前已设置并且变化后未设置的属性会恢复为默认值_
      instance.orientation(ImageRotateOrientation.RIGHT);
    }
  }
}

示例代码运行效果如下：

系统API版本小于API 14：

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/94/v3/E3_a5plyS_CmlVYoInbEIg/zh-cn_image_0000002628569782.png?HW-CC-KV=V1&HW-CC-Date=20260709T133935Z&HW-CC-Expire=86400&HW-CC-Sign=406215D0BAA89635A714953C93FE6343F8E8D1930559688E904B45BDD11AEC49 "点击放大")

系统API版本大于API 14：

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/52/v3/9UnMBnl2SYyIVU1wgt_lqA/zh-cn_image_0000002628409878.png?HW-CC-KV=V1&HW-CC-Date=20260709T133935Z&HW-CC-Expire=86400&HW-CC-Sign=8794A0240439BF2D23B3B543B237A9BC7660FA8AEB69828CC580DB7C42FE5140 "点击放大")