1# 动态属性设置 2 3动态设置组件的属性，支持开发者在属性设置时使用if/else语法，且根据需要使用多态样式设置属性。 4 5> **说明：** 6> 7> 从API Version 11开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8> 9> 在attributeModifier中设置的属性尽量不要与其他方法设置的属性相同，避免在页面刷新时attributeModifier不生效。 10> 11> attributeModifier不支持自定义组件。 12 13## attributeModifier 14 15attributeModifier(modifier: AttributeModifier\<T>) 16 17动态设置组件的属性方法。 18 19**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 20 21**系统能力：** SystemCapability.ArkUI.ArkUI.Full 22 23**参数：** 24 25| 参数名 | 类型 | 必填 | 说明 | 26| -------- | --------------------- | ---- | ------------------------------------------------------------ | 27| modifier | [AttributeModifier\<T>](#attributemodifiert) | 是 | 在当前组件上，动态设置属性方法，支持使用if/else语法。<br/>modifier: 属性修改器，开发者需要自定义class实现AttributeModifier接口。 | 28 29## AttributeModifier\<T> 30 31开发者需要自定义class实现AttributeModifier接口。 32 33**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 34 35### applyNormalAttribute 36applyNormalAttribute(instance: T) : void 37 38组件普通状态时的样式。 39 40**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 41 42### applyPressedAttribute 43applyPressedAttribute(instance: T) : void 44 45组件按压状态的样式。 46 47**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 48 49### applyFocusedAttribute 50applyFocusedAttribute(instance: T) : void 51 52组件获焦状态的样式。 53 54**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 55 56### applyDisabledAttribute 57applyDisabledAttribute(instance: T) : void 58 59组件禁用状态的样式。 60 61**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 62 63### applySelectedAttribute 64applySelectedAttribute(instance: T) : void 65 66组件选中状态的样式 67 68开发者可根据需要自定义实现这些方法，通过传入的参数识别组件类型，对instance设置属性，支持使用if/else语法进行动态设置。 69 70**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 71 72**参数**： 73 74| 参数 | 描述 | 75| -------------------- | ------------------------------------------------------------ | 76| instance |组件的属性类，用来标识进行属性设置的组件的类型，比如Button组件的ButtonAttribute，Text组件的TextAttribute等。| 77 78**instance参数支持范围:** 79 80AlphabetIndexerAttribute、BadgeAttribute、BlankAttribute、ButtonAttribute、CalendarPickerAttribute、CanvasAttribute、CheckboxAttribute、CheckboxGroupAttribute、CircleAttribute、ColumnAttribute、ColumnSplitAttribute、ShapeAttribute、CommonAttribute、CounterAttribute、DataPanelAttribute、DatePickerAttribute、DividerAttribute、EllipseAttribute、FlexAttribute、FlowItemAttribute、FormLinkAttribute、GaugeAttribute、GridAttribute、GridColAttribute、ColumnAttribute、GridItemAttribute、GridRowAttribute、HyperlinkAttribute、ImageAttribute、ImageAnimatorAttribute、ImageSpanAttribute、LineAttribute、ListAttribute、ListItemAttribute、ListItemGroupAttribute、LoadingProgressAttribute、MarqueeAttribute、MenuAttribute、MenuItemAttribute、MenuItemGroupAttribute、NavDestinationAttribute、NavigationAttribute、NavigatorAttribute、NavRouterAttribute、PanelAttribute、PathAttribute、PatternLockAttribute、PolygonAttribute、PolylineAttribute、ProgressAttribute、QRCodeAttribute、RadioAttribute、RatingAttribute、RectAttribute、RefreshAttribute、RelativeContainerAttribute、RichEditorAttribute、RichTextAttribute、RowAttribute、RowSplitAttribute、ScrollAttribute、ScrollBarAttribute、SearchAttribute、SelectAttribute、ShapeAttribute、SideBarContainerAttribute、SliderAttribute、SpanAttribute、StackAttribute、StepperAttribute、StepperItemAttribute、SwiperAttribute、SymbolGlyphAttribute、TabContentAttribute、TabsAttribute、TextAttribute、TextAreaAttribute、TextClockAttribute、TextInputAttribute、TextPickerAttribute、TextTimerAttribute、TimePickerAttribute、ToggleAttribute、VideoAttribute、WaterFlowAttribute、XComponentAttribute、ParticleAttribute<!--Del-->、EffectComponentAttribute、FormComponentAttribute、PluginComponentAttribute、RemoteWindowAttribute、UIExtensionComponentAttribute<!--DelEnd-->。 81 82**属性支持范围:** 83 84不支持入参为[CustomBuilder](ts-types.md#custombuilder8)或Lamda表达式的属性，且不支持手势，事件仅支持onClick、onTouch、onAppear、onDisAppear、onMouse、onHover、onKeyEvent、onBlur、onFocus、onAreaChange、onSizeChange、onGestureJudgeBegin、onGestureRecognizerJudgeBegin、shouldBuiltInRecognizerParallelWith。不支持已废弃属性，未支持的属性在使用时会抛异常"Method not implemented"。 85## 自定义Modifier 86从API version 12开始，开发者可使用自定义Modifier构建组件并配置属性，通过此自定义的Modifier可调用所封装组件的属性和样式接口。 87 88**自定义Modifier支持范围:** 89 90CommonModifier、ColumnModifier、ColumnSplitModifier、RowModifier、RowSplitModifier、SideBarContainerModifier、BlankModifier、DividerModifier、GridColModifier、GridRowModifier、NavDestinationModifier、NavigatorModifier、StackModifier、NavigationModifier、NavRouterModifier、StepperItemModifier、TabsModifier、GridModifier、GridItemModifier、ListModifier、ListItemModifier、ListItemGroupModifier、ScrollModifier、SwiperModifier、WaterFlowModifier、ButtonModifier、CounterModifier、TextPickerModifier、TimePickerModifier、ToggleModifier、CalendarPickerModifier、CheckboxModifier、CheckboxGroupModifier、DatePickerModifier、RadioModifier、RatingModifier、SelectModifier、SliderModifier、PatternLockModifier、SpanModifier、RichEditorModifier、RefreshModifier、SearchModifier、TextAreaModifier、TextModifier、TextInputModifier、ImageSpanModifier、ImageAnimatorModifier、ImageModifier、VideoModifier、DataPanelModifier、GaugeModifier、LoadingProgressModifier、MarqueeModifier、ProgressModifier、QRCodeModifier、TextClockModifier、TextTimerModifier、LineModifier、PathModifier、PolygonModifier、PolylineModifier、RectModifier、ShapeModifier、AlphabetIndexerModifier、FormComponentModifier、HyperlinkModifier、MenuModifier、MenuItemModifier、PanelModifier、SymbolGlyphModifier、ParticleModifier。 91未暴露的组件Modifier可以使用CommonModifier。 92 93**注意事项** 941. 设置自定义Modifier给一个组件，该组件对应属性生效。 952. 自定义Modifier属性值变化，组件对应属性也会变化。自定义Modifier类型为基类，构造的对象为子类对象，使用时要通过as进行类型断言为子类。 963. 一个自定义Modifier设置给两个组件，Modifier属性变化的时候对两个组件同时生效。 974. 一个Modifier设置了属性A和属性B，再设置属性C和属性D，4个属性同时在组件上生效。 985. 自定义Modifier不支持@State标注的状态数据的变化感知，见示例2。 996. 多次通过attributeModifier设置属性时，生效的属性为所有属性的并集，相同属性按照设置顺序生效。 100 101## 示例 102### 示例1 103```ts 104// xxx.ets 105class MyButtonModifier implements AttributeModifier<ButtonAttribute> { 106 isDark: boolean = false 107 applyNormalAttribute(instance: ButtonAttribute): void { 108 if (this.isDark) { 109 instance.backgroundColor(Color.Black) 110 } else { 111 instance.backgroundColor(Color.Red) 112 } 113 } 114} 115 116@Entry 117@Component 118struct attributeDemo { 119 @State modifier: MyButtonModifier = new MyButtonModifier() 120 121 build() { 122 Row() { 123 Column() { 124 Button("Button") 125 .attributeModifier(this.modifier) 126 .onClick(() => { 127 this.modifier.isDark = !this.modifier.isDark 128 }) 129 } 130 .width('100%') 131 } 132 .height('100%') 133 } 134} 135``` 136 137 138 139 140```ts 141// xxx.ets 142class MyButtonModifier implements AttributeModifier<ButtonAttribute> { 143 applyNormalAttribute(instance: ButtonAttribute): void { 144 instance.backgroundColor(Color.Black) 145 } 146 147 applyPressedAttribute(instance: ButtonAttribute): void { 148 instance.backgroundColor(Color.Red) 149 } 150} 151 152@Entry 153@Component 154struct attributePressedDemo { 155 @State modifier: MyButtonModifier = new MyButtonModifier() 156 157 build() { 158 Row() { 159 Column() { 160 Button("Button") 161 .attributeModifier(this.modifier) 162 } 163 .width('100%') 164 } 165 .height('100%') 166 } 167} 168``` 169 170 171### 示例2 172自定义Modifier不支持@State标注的状态数据的变化感知。 173```ts 174import { CommonModifier } from "@kit.ArkUI" 175 176class MyModifier extends CommonModifier { 177 applyNormalAttribute(instance: CommonAttribute) : void{ 178 super.applyNormalAttribute?.(instance); 179 } 180} 181 182@Component 183struct MyImage1 { 184 @Link modifier : CommonModifier 185 186 build(){ 187 Image($r("app.media.testImage")).attributeModifier(this.modifier as MyModifier) 188 } 189} 190@Entry 191@Component 192struct Index { 193 index : number = 0; 194 @State width1 : number = 100; 195 @State height1 : number = 100; 196 @State myModifier: CommonModifier = new MyModifier().width(this.width1).height(this.height1).margin(10) 197 198 build() { 199 Column() { 200 Button($r("app.string.EntryAbility_label")) 201 .margin(10) 202 .onClick(() => { 203 console.log("Modifier","onClick") 204 this.index ++; 205 if(this.index %2 === 1){ 206 this.width1 = 10; 207 console.log("Modifier","setGroup1") 208 }else{ 209 this.width1 = 10; 210 console.log("Modifier","setGroup2") 211 } 212 }) 213 MyImage1({modifier:this.myModifier}) 214 } 215 .width('100%') 216 } 217} 218``` 219 220### 示例3 221自定义Modifier设置了width和height，点击按钮时设置borderStyle和borderWidth，点击后4个属性同时生效。 222```ts 223import { CommonModifier } from "@kit.ArkUI" 224 225class MyModifier extends CommonModifier { 226 applyNormalAttribute(instance: CommonAttribute) : void{ 227 super.applyNormalAttribute?.(instance); 228 } 229 230 public setGroup1() : void { 231 this.borderStyle(BorderStyle.Dotted) 232 this.borderWidth(8) 233 } 234 235 public setGroup2() : void { 236 this.borderStyle(BorderStyle.Dashed) 237 this.borderWidth(8) 238 } 239} 240 241@Component 242struct MyImage1 { 243 @Link modifier : CommonModifier 244 245 build(){ 246 Image($r("app.media.testImage")).attributeModifier(this.modifier as MyModifier) 247 } 248} 249 250@Entry 251@Component 252struct Index { 253 @State myModifier: CommonModifier = new MyModifier().width(100).height(100).margin(10) 254 index : number = 0; 255 256 build() { 257 Column() { 258 Button($r("app.string.EntryAbility_label")) 259 .margin(10) 260 .onClick(() => { 261 console.log("Modifier","onClick") 262 this.index ++; 263 if(this.index %2 === 1){ 264 (this.myModifier as MyModifier).setGroup1() 265 console.log("Modifier","setGroup1") 266 }else{ 267 (this.myModifier as MyModifier).setGroup2() 268 console.log("Modifier","setGroup2") 269 } 270 }) 271 MyImage1({modifier:this.myModifier}) 272 } 273 .width('100%') 274 } 275} 276``` 277 278
