HarmonyOS鸿蒙Next中如何比较优雅的处理系统组件的属性的兼容性问题

HarmonyOS鸿蒙Next中如何比较优雅的处理系统组件的属性的兼容性问题 在工程的build-profile设置了targetSdk和minSdk

"targetSdkVersion": "6.0.0(20)",
"compatibleSdkVersion": "5.0.1(13)",

设置的minSdk是13版本，targetSdk是20版本，当在代码中用了高于13版本的api时候，就要处理兼容性的问题了。

这里以NavDestination的systemTransition属性举例，处理完兼容性的问题的代码如下：

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

@ComponentV2
struct PageOne{

  @Provider('isPageShow') isPageShow :boolean = false

  @Builder
  contentBuilder(){
    //...省略的代码
  }

  build() {
    if (deviceInfo.sdkApiVersion >= 14) {
      if (deviceInfo.sdkApiVersion >= 15) {
        NavDestination() {
          this.contentBuilder()
        }
        /**
         * ...省略的属性和事件代码
         */
        .onShown(() => {
          this.isPageShow = true
        })
        .onHidden(() => {
          this.isPageShow = false
        })
        .systemTransition(NavigationSystemTransitionType.SLIDE_BOTTOM)
      } else {
        NavDestination() {
          this.contentBuilder()
        }
        /**
         * ...省略的属性和事件代码
         */
        .onShown(() => {
          this.isPageShow = true
        })
        .onHidden(() => {
          this.isPageShow = false
        })
        .systemTransition(NavigationSystemTransitionType.DEFAULT)
      }
    } else {
      NavDestination() {
        this.contentBuilder()
      }
      /**
       * ...省略的属性和事件代码
       */
      .onShown(() => {
        this.isPageShow = true
      })
      .onHidden(() => {
        this.isPageShow = false
      })
    }
  }
}

一模一样的代码要写多遍，如果要修改就要改多个地方，忘记了少改一个地方就会导致bug，简直让人崩溃😭

那如何优雅的处理这个问题呢？

答案是使用attributeModifier：

import { deviceInfo } from "@kit.BasicServicesKit";
import { AttributeUpdater } from "@kit.ArkUI";

//需要处理兼容性的属性
export interface NavCompatibleAttr{
  navTransitionType?:number
}

export class NavModifier extends AttributeUpdater<NavDestinationAttribute> {
  readonly attr :NavCompatibleAttr

  constructor(attr: NavCompatibleAttr) {
    super();
    this.attr = attr;
  }

  // 首次绑定时触发initializeModifier方法，进行属性初始化
  initializeModifier(instance: NavDestinationAttribute): void {
    if (deviceInfo.sdkApiVersion >= 15) {
      if(typeof this.attr.navTransitionType === 'number'){
        instance.systemTransition(this.attr.navTransitionType)
      }
    }else if (deviceInfo.sdkApiVersion >= 14) {
      if(typeof this.attr.navTransitionType === 'number'){
        if(this.attr.navTransitionType <= NavigationSystemTransitionType.CONTENT){
          instance.systemTransition(this.attr.navTransitionType)
        }
        else {
          instance.systemTransition(NavigationSystemTransitionType.DEFAULT)
        }
      }
    }
  }
}

@ComponentV2
struct PageTwo {
  @Provider('isPageShow') isPageShow: boolean = false

  build() {
    NavDestination() {
      //...省略的代码
    }
    /**
     * ...省略的属性和事件代码
     */
    .onShown(() => {
      this.isPageShow = true
    })
    .onHidden(() => {
      this.isPageShow = false
    })
    //.systemTransition(NavigationSystemTransitionType.SLIDE_BOTTOM)
    .attributeModifier(new NavModifier({navTransitionType:7}))//SLIDE_BOTTOM的值是7，这里偷懒下
  }
}