HarmonyOS @Extend 的使用问题

@Extend(Text) function fancy (fontSize: number) { 
  .fontColor(Color.Red) 
  .fontSize(fontSize) 
}1.
2.
3.
4.

这个扩展的style 能定义在一个文件中,项目的有需要的组件都能使用么,目前只有定义在同一个文件下的component能应用到这个自定义的属性

HarmonyOS

milchcow

2024-08-03 14:09:27

浏览

回答 1

按赞同

按时间

elucky

当前已有能力实现样式跨文件复用，类似viewModifier，

//定义样式文件，MyImageModifier .ets

import { ImageModifier } from “@ohos.arkui.modifer”; 
class MyImageModifier extends ImageModifier { 
  public syncModeValue?: boolean 
  public cacheModeValue?: boolean 
  override applyNormalAttribute(instance: ImageAttribute): void { 
    super.applyNormalAttribute(instance) 
    // extend logics 
  } 
  syncMode(isSync: boolean) : MyImageModifier { 
    this.syncModeValue = isSync 
    return this 
  } 
  cacheMode(isCached: boolean) : MyImageModifier { 
    this.cacheModeValue = isCached 
    return this 
  } 
} 
//封装自定义组件@Component 
struct MyImage { 
  @Link modifier: MyImageModifier 
  @State src: string 
  build() { 
    Image(this.src) 
      .attributeModifier(this.modifier) 
  } 
  aboutToAppear() { 
    if (this.modifier.syncModeValue) { 
      // do something 
    } 
    if (this.modifier.cacheModeValue) { 
      // do something 
    } 
  } 
} 
//使用自定义组件 
@Entry @Component 
struct Index { 
  @State myImageModifier: MyImageModifier = 
    new MyImageModifier() 
      .syncMode(true) 
      .cacheMode(true) 
      .autoResize(true) 
      .renderMode(ImageRenderMode.Template) 
      .width(100) 
  isSync: boolean = false 
 
  build() { 
    Row() { 
      MyImage({ modifier: this.myImageModifier, src: $r(‘xxxx’) }) 
      Button(“Click”).onClick(() => { 
        isSync = !isSync 
        this.myImageModifier.syncMode(isSync) 
      }) 
    } 
  } 
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.