# koala_image

**Repository Path**: XiaoBaiAHui/koala_image

## Basic Information

- **Project Name**: koala_image
- **Description**: koala 项目docker镜像部署
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-03-28
- **Last Updated**: 2025-07-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# koala

## 介绍
koala project

 ### attributeModifier 通用属性对接
 
 参考pr

 https://openharmony.gitee.com/openharmony/arkui_ace_engine/pulls/61723

 相关代码 
 
 1. arkui-ohos\src\component\common.ts   ## attributeModifier 对外接口
 
 2. arkui-ohos\src\AttributeUpdater.ts ## AttributeUpdater 对外接口
 
 3. arkoala-arkts\arkui-ohos\src\CommonModifier.ts ## AttributeUpdater 对外接口

![alt text](image/1.png)


 通用实现逻辑

 ![alt text](image/2.png)


 #### 1. 属性对接

 需要各个组件参考  arkui-ohos\src\generated\common.ts#attributeModifier attributeModifier方法

1. CommonMethod 中定义属性方法
 ```ts
export interface CommonMethod {
      width(value: Length | undefined): this;
}
 ```

 2. 如果是通用属性则在ArkCommonModifier中实现一个对应的Modifier。组件特有属性需要在组件自己Modifier类中实现。可以参考 ArkTextModifier.ts，下面是ArkCommonmodifier.ts 中的实现。
 ```ts
class WidthModifier extends ModifierWithKey<Length> {
    constructor(value: Length) {
        super(value);
    }
    static identity: string = 'width';
    applyPeer(node: ArkCommonMethodPeer, reset: boolean): void {
        if (reset) {
            // commomPeerNode.resetWidthAttribute();
        } else {
            node.widthAttribute(this.value!);
        }
    }
    static factory(value: Length): WidthModifier {
        return new WidthModifier(value)
    }
}
 ```

 3. 每个组件都要继承ArkBaseNode。然后在里面实现组件特有属性的更新和custructParams 方法。custructParams。
 ```ts
export class ArkBaseNode extends ComponentBase implements CommonAttribute {
   
   // 组件初始化方法，对接开发者attributeUpdater中的updateConstructorParams方法
   constructParam(...param: Object[]): this {
        return this;
    }

    width(value: Length | undefined) : this {
        if (!value) {
            // this.getPeer().resetWidthAttribute()
            return this;
        }
        this.getPeer().widthAttribute(value)
        return this;
    } 
}
```

 4. 如果是通用属性写在ArkCommonAttributeSet组件特有属性则继承ArkCommonAttributeSet，在组件自己的modifier中实现。
 ```ts
export class ArkCommonAttributeSet implements CommonAttribute {
width(value: Length | undefined): this {
        if (value) {
            modifierWithKey(this._modifiersWithKeys, WidthModifier.identity, WidthModifier.factory, value);
        } else {
            modifierNullWithKey(this._modifiersWithKeys, WidthModifier.identity)
        }
        return this;
    }
}
 ```

 #### 2. attributeUpdater.attribute 对接
 
 参考 arkui-ohos\src\generated\ArkCommon.ts#attributeModifier 方法,这里需要转换为各个组件的 attribute 方法。 比如 Text 则为 TextAttribute。

 ```ts
 attributeUpdater.attribute = this.getModifierHost() as TextAttribute
 ```

 这里的  下列方法需要组件自己实现。比如Text 组件.

 ```ts
    protected _modifierHost: ArkBaseNode | undefined
    
    setModifierHost(value: ArkBaseNode): void {
        this._modifierHost = value
    }
    
    getModifierHost(): ArkBaseNode {
        if (this._modifierHost === undefined || this._modifierHost === null) {
            this._modifierHost = new ArkBaseNode()
            this._modifierHost!.setPeer(this.getPeer())
        }
        return this._modifierHost!
    }

    getAttributeSet(): ArkCommonAttributeSet  {
        return this.getPeer()._attributeSet as ArkCommonAttributeSet;
    }

    initAttributeSet<T>(modifier: AttributeModifier<T>): void {
        // 如果是 text 组件 则  let isTextModifier: boolean = modifier instanceof TextModifir;
        let isCommonModifier: boolean = modifier instanceof CommonModifier;
        if (isCommonModifier) {
            let commonModifier = modifier as object as CommonModifier;
            this.getPeer()._attributeSet = commonModifier.attributeSet;
        } else {
            this.getPeer()._attributeSet = new ArkCommonAttributeSet();
        }

    }
 ```

ArkTextBaseNode 需要 继承 ArkBaseNode 然后实现自己特有的方法。

 ```ts
export class ArkTextBaseNode extends ArkBaseNode implements TextAttribute {
    // 用于 attributeModifier 中的 updateConstructParam 回调
    constructParam(...param: Object[]): this {
        InteropNativeModule._NativeLog("text constructParam enter")
        return this;
    }

    textAlign(): this {
        return this;
    }
}
 ```

 #### 3. attributeUpdater.updateConstructorParams 对接

  参考 arkui-ohos\src\generated\ArkCommon.ts#updateConstructorParams 方法,无需组件实现。 统一使用common 中的。

   ```ts
   attributeUpdater.updateConstructorParams = (...params: Object[]) => {
                let attribute = this.getModifierHost()! as CommonAttribute;
                attribute.constructParam(params);
                return attribute;
            };
 ```


#### 4. commonModifier 实现与适配

CommonModifier 中持有一个 AttributeSet 调用 CommonModifier 中的通用属性方法会调用 AttributeSet 中对应的方法来达到设置通用属性的方法,核心代码如下。

 
  ```ts
  // CommonModifier.ts
  // 创建一个 attributeSet
    private attributeSet: ArkCommonAttributeSet = new ArkCommonAttributeSet();
    get attribute(): ArkCommonAttributeSet {
        return this.attributeSet;
    }

    width(value: Length | undefined): this {
        this.attributeSet.width(value);
        return this;
    }

 ```

   ```ts
  // ArkCommon.ts
    attributeModifier<T>(modifier: AttributeModifier<T>): this {
        let peerNode = this.getPeer()
        if (!peerNode._attributeSet) {
            let isCommonModifier: boolean = (modifier instanceof CommonModifier);
            if (isCommonModifier) {
               // 如果是commonModifier 通过 commonModifier  获取 attributeSet
                let commonModifier = modifier as object as CommonModifier;
                peerNode._attributeSet = commonModifier.attribute;
            } else {
                peerNode._attributeSet = new ArkCommonAttributeSet()
            }
        }
        applyUIAttributes(modifier, peerNode);
       //  ...   

    }

   
 ```

 #### 4. attributeModifier 示例
  
  ```ts
  import { CommonModifier } from '@ohos.arkui.modifier'

class MyCommonModifier extends CommonModifier {
  applyNormalAttribute(instance: CommonAttribute): void {

    instance.width(100)
    instance.height("40%")
    instance.zIndex(2)
  }
}

class MyCommonModifier2 extends CommonModifier {
  applyNormalAttribute(instance: CommonAttribute): void {
    instance.size({width:150,height:150})
    instance.onClick((e:ClickEvent ) => {
      console.log("wjh 123")
    })
  }
}

@Entry
@Component
struct Index {
  modifier: MyCommonModifier = new MyCommonModifier()
  build() {
    Stack() {
      Text("hello word").attributeModifier(this.modifier)
        .backgroundColor(Color.Orange)
      Button("test button")
        .zIndex(1)
        .backgroundColor(Color.Orange)
        .attributeModifier(new MyCommonModifier2())
    }.width(200)
     .height(200)
  }
}
 ```

#### issue

##### 1. sdk 配合修改 

由于sdk修改暂未上库所以在编译时需修改sdk对应接口

 ### attributeModifier 自动化代码生成对接
 对应pr 
https://gitee.com/openharmony/arkui_ace_engine/pulls/67182


#### 1. 自动生成代码
 每个组件都会生成一个继承 ArkCommonMethodSet 的组件Set 比如 Button 则为 ArkButtonSet

#### 2. 组件对接
##### 2.1每个组件都需要实现 attributeModifier接口，比如Button 组件 需要在 ButtonAttribute 中定方法
```
export interface ButtonAttribute extends CommonMethod {
    attributeModifier(value: AttributeModifier<ButtonAttribute> | AttributeModifier<CommonMethod>| undefined): this { return this;}
}
```
##### 2.2 组件对 attributeModifier的实现 

 2.2.1 组件Attribute修修改例如，ButtonAttribute
    新增  getButtonAttributeSet():ArkButtonSet { return new ArkButtonSet(); } 方法

    新增 attributeModifier(value: AttributeModifier<ButtonAttribute> | AttributeModifier<CommonMethod>| undefined): this; 方法
 
 ```
export interface ButtonAttribute extends CommonMethod {
    export interface ButtonAttribute extends CommonMethod {
    type(value: ButtonType | undefined): this {return this;}
    stateEffect(value: boolean | undefined): this { return this;}
    buttonStyle(value: ButtonStyleMode | undefined): this { return this;}
    controlSize(value: ControlSize | undefined): this { return this;}
    role(value: ButtonRole | undefined): this { return this;}
    fontColor(value: ResourceColor | undefined): this { return this;}
    fontSize(value: Length | undefined): this { return this;}
    fontWeight(value: number | FontWeight | string | undefined): this { return this;}
    fontStyle(value: FontStyle | undefined): this { return this;}
    fontFamily(value: string | Resource | undefined): this { return this;}
    contentModifier(value: ContentModifier | undefined): this { return this;}
    labelStyle(value: LabelStyle | undefined): this { return this;}
    minFontScale(value: number | Resource | undefined): this { return this;}
    maxFontScale(value: number | Resource | undefined): this { return this;}
    attributeModifier(value: AttributeModifier<ButtonAttribute> | AttributeModifier<CommonMethod>| undefined): this { return this;}
}
}
 ```
  2.2.2 在组件Component 组件中实现 attribuetModifier 方法,主要是构造 attributeSet, constructParam, updaterReceiver 这三个参数。
 
 ```
       public attributeModifier(modifier: AttributeModifier<ButtonAttribute> | AttributeModifier<CommonMethod> | undefined): this {
        if (modifier === undefined) {
            return this;
        }
        let isButtonModifier: boolean = modifier instanceof ButtonModifier;
        let isCommonModifier: boolean = modifier instanceof CommonModifier;
        if (isCommonModifier && !isButtonModifier) {
            applyCommonModifier(this.getPeer(), modifier as Object as AttributeModifier<CommonMethod>);
            return this;
        }
        let attributeSet = (): ArkButtonSet => {
            if (isButtonModifier) {
                let buttonModifier = modifier as object as ButtonModifier;
                this.getPeer()._attributeSet = buttonModifier.getAttributeSet();
                return buttonModifier.getAttributeSet();
            } else {
                let buttonSet = new ArkButtonSet();
                this.getPeer()._attributeSet = buttonSet;
                return buttonSet;
            }
        }
        let constructParam = (...params: FixedArray<Object>): void => {
        };
        let updaterReceiver = (): ArkButtonComponent => {
            let component: ArkButtonComponent = new ArkButtonComponent();
            component.setPeer(this.getPeer());
            return component;
        };
        applyAttributeModifierBase(modifier as Object as AttributeModifier<ButtonAttribute>, attributeSet, constructParam, updaterReceiver);
        return this
    }
     
 ```
  2.2.3 组件Modifier 的实现 
 
 ```
import {  AttributeModifier } from 'arkui/component/common'
import { ArkButtonSet, ButtonAttribute } from 'arkui/component/button'
import { CommonModifier } from './CommonModifier';
import {  InteropNativeModule } from "@koalaui/interop"
export class ButtonModifier extends CommonModifier implements ButtonAttribute, AttributeModifier<ButtonAttribute> {

  private attributeSet: ArkButtonSet = new ArkButtonSet();
  public getAttributeSet(): ArkButtonSet { 
    return this.attributeSet;
   }
  public fontSize(value: number | undefined): this {
    this.getAttributeSet().fontSize(value);
    return this;
  }  
}
 ```
2.2.4 组件Node中新增字段  
 
```
export class ArkButtonPeer extends ArkCommonMethodPeer {
    _attributeSet?: ArkButtonSet;
}
 ```