1# 动态属性设置 2 3动态设置组件的属性，支持开发者在属性设置时使用if/else语法，且根据需要使用多态样式设置属性。 4 5> **说明：** 6> 7> 从API Version 11开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9## attributeModifier 10 11attributeModifier(modifier: AttributeModifier\<T>) 12 13动态设置组件的属性方法。 14 15**系统能力：** SystemCapability.ArkUI.ArkUI.Full 16 17**参数：** 18 19| 参数名 | 类型 | 必填 | 说明 | 20| -------- | --------------------- | ---- | ------------------------------------------------------------ | 21| modifier | AttributeModifier\<T> | 是 | 在当前组件上，动态设置属性方法，支持使用if/else语法。<br/>modifier: 属性修改器，开发者需要自定义class实现AttributeModifier接口。 | 22 23## AttributeModifier\<T> 24 25开发者需要自定义class实现AttributeModifier接口。 26 27### applyNormalAttribute 28applyNormalAttribute(instance: T) : void 29 30组件普通状态时的样式。 31 32### applyPressedAttribute 33applyPressedAttribute(instance: T) : void 34 35组件按压状态的样式。 36 37### applyFocusedAttribute 38applyFocusedAttribute(instance: T) : void 39 40组件获焦状态的样式。 41 42### applyDisabledAttribute 43applyDisabledAttribute(instance: T) : void 44 45组件禁用状态的样式。 46 47### applySelectedAttribute 48applySelectedAttribute(instance: T) : void 49 50组件选中状态的样式 51 52开发者可根据需要自定义实现这些方法，通过传入的参数识别组件类型，对instance设置属性，支持使用if/else语法进行动态设置。 53 54**参数**： 55 56| 参数 | 描述 | 57| -------------------- | ------------------------------------------------------------ | 58| instance |组件的属性类，用来标识进行属性设置的组件的类型，比如Button组件的ButtonAttribute，Text组件的TextAttribute等。| 59 60**instance参数支持范围:** 61 62AlphabetIndexerAttribute、BadgeAttribute、BlankAttribute、ButtonAttribute、CalendarPickerAttribute、CanvasAttribute、CheckboxAttribute、CheckboxGroupAttribute、CircleAttribute、ColumnAttribute、ColumnSplitAttribute、ShapeAttribute、CommonAttribute、CounterAttribute、DataPanelAttribute、DatePickerAttribute、DividerAttribute、EffectComponentAttribute、EllipseAttribute、FlexAttribute、FlowItemAttribute、FormComponentAttribute、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、PluginComponentAttribute、PolygonAttribute、PolylineAttribute、ProgressAttribute、QRCodeAttribute、RadioAttribute、RatingAttribute、RectAttribute、RefreshAttribute、RelativeContainerAttribute、RemoteWindowAttribute、RichEditorAttribute、RichTextAttribute、RowAttribute、RowSplitAttribute、ScrollAttribute、ScrollBarAttribute、SearchAttribute、SelectAttribute、ShapeAttribute、SideBarContainerAttribute、SliderAttribute、SpanAttribute、StackAttribute、StepperAttribute、StepperItemAttribute、SwiperAttribute、TabContentAttribute、TabsAttribute、TextAttribute、TextAreaAttribute、TextClockAttribute、TextInputAttribute、TextPickerAttribute、TextTimerAttribute、TimePickerAttribute、ToggleAttribute、UIExtensionComponentAttribute、VideoAttribute、WaterFlowAttribute、WebAttribute、XComponentAttribute 63 64**属性支持范围:** 65 66不支持入参为[CustomBuilder](ts-types.md#custombuilder8)或Lamda表达式的属性，且不支持事件和手势。 67 68## 示例 69 70```ts 71// xxx.ets 72class MyButtonModifier implements AttributeModifier<ButtonAttribute> { 73 isDark: boolean = false 74 applyNormalAttribute(instance: ButtonAttribute): void { 75 if (this.isDark) { 76 instance.backgroundColor(Color.Black) 77 } else { 78 instance.backgroundColor(Color.Red) 79 } 80 } 81} 82 83@Entry 84@Component 85struct attributeDemo { 86 @State modifier: MyButtonModifier = new MyButtonModifier() 87 88 build() { 89 Row() { 90 Column() { 91 Button("Button") 92 .attributeModifier(this.modifier) 93 .onClick(() => { 94 this.modifier.isDark = !this.modifier.isDark 95 }) 96 } 97 .width('100%') 98 } 99 .height('100%') 100 } 101} 102``` 103 104 105 106 107```ts 108// xxx.ets 109class MyButtonModifier implements AttributeModifier<ButtonAttribute> { 110 applyNormalAttribute(instance: ButtonAttribute): void { 111 instance.backgroundColor(Color.Black) 112 } 113 114 applyPressedAttribute(instance: ButtonAttribute): void { 115 instance.backgroundColor(Color.Red) 116 } 117} 118 119@Entry 120@Component 121struct attributePressedDemo { 122 @State modifier: MyButtonModifier = new MyButtonModifier() 123 124 build() { 125 Row() { 126 Column() { 127 Button("Button") 128 .attributeModifier(this.modifier) 129 } 130 .width('100%') 131 } 132 .height('100%') 133 } 134} 135``` 136
