多态样式支持hover-docs-AtomGit

	@@ -19,6 +19,8 @@
19	> - 对于仅需根据条件设置组件单一属性的简单场景，可以使用[三目表达式](../../../ui/state-management/arkts-declarative-ui-description.md#配置属性)（如.width(isFullScreen ? 200 : 100)）。	19	> - 对于仅需根据条件设置组件单一属性的简单场景，可以使用[三目表达式](../../../ui/state-management/arkts-declarative-ui-description.md#配置属性)（如.width(isFullScreen ? 200 : 100)）。
20	>	20	>
21	> - 从API version 20开始，attributeModifier支持自定义组件。	21	> - 从API version 20开始，attributeModifier支持自定义组件。
		22	+>
		23	+> - 如果组件同时处于多种状态，并且分别在各自的状态里设置了一样的属性，那么最终样式生效的优先级为悬浮态<按压态<获焦态<禁用态<选中态。例如，如果组件同时处于悬浮态和按压态，在悬浮态和按压态都设置了背景色，那么此时组件最终显示按压态的背景色。
22		24
23	## attributeModifier	25	## attributeModifier
24		26
	@@ -136,6 +138,24 @@ applySelectedAttribute?(instance: T): void
136	\| -------- \| ------- \| ------ \| ------------------------------------------------------------------------------------------------------------ \|	138	\| -------- \| ------- \| ------ \| ------------------------------------------------------------------------------------------------------------ \|
137	\| instance \| T \| 是 \| 组件的属性类，用来标识进行属性设置的组件的类型，比如[Button](ts-basic-components-button.md)组件的[属性](ts-basic-components-button.md#属性)（ButtonAttribute），[Text](ts-basic-components-text.md)组件的[属性](ts-basic-components-text.md#属性)（TextAttribute）等。具体取值请参考[Attribute类型支持范围](#attribute类型支持范围)。 \|	139	\| instance \| T \| 是 \| 组件的属性类，用来标识进行属性设置的组件的类型，比如[Button](ts-basic-components-button.md)组件的[属性](ts-basic-components-button.md#属性)（ButtonAttribute），[Text](ts-basic-components-text.md)组件的[属性](ts-basic-components-text.md#属性)（TextAttribute）等。具体取值请参考[Attribute类型支持范围](#attribute类型支持范围)。 \|
138		140
		141	+### applyHoveredAttribute
		142	+
		143	+applyHoveredAttribute?(instance: T): void
		144	+
		145	+组件悬浮状态的样式。参考[示例9（组件绑定Modifier实现鼠标悬浮态效果）](#示例9组件绑定modifier实现鼠标悬浮态效果)。
		146	+
		liujing5月25日 26的接口需要在接口描述下边添加“起始版本”说明，统一补充。起始版本： 26.0.0 Yun-xier 5月25日评论： 5月25日评论：
		147	+起始版本： 26.0.0
		148	+
		149	+原子化服务API：从API版本26.0.0开始，该接口支持在原子化服务中使用。
		150	+
		151	+系统能力： SystemCapability.ArkUI.ArkUI.Full
		152	+
		153	+参数：
		154	+
		155	+\| 参数名 \| 类型 \| 必填 \| 说明 \|
		156	+\| -------- \| ------- \| ------ \| ------------------------------------------------------------------------------------------------------------ \|
		157	+\| instance \| T \| 是 \| 组件的属性类，用来标识进行属性设置的组件的类型，比如[Button](ts-basic-components-button.md)组件的[属性](ts-basic-components-button.md#属性)（ButtonAttribute），[Text](ts-basic-components-text.md)组件的[属性](ts-basic-components-text.md#属性)（TextAttribute）等。具体取值请参考[Attribute类型支持范围](#attribute类型支持范围)。 \|
		158	+
139	### Attribute类型支持范围	159	### Attribute类型支持范围
140		160
141	\| 名称 \| 说明 \|	161	\| 名称 \| 说明 \|
	@@ -744,3 +764,42 @@ struct ChildComponent {
744	```	764	```
745		765
746	![attributeModifier_common](figures/attributeModifier_common.gif)	766	![attributeModifier_common](figures/attributeModifier_common.gif)
		767	+
		768	+### 示例9（组件绑定Modifier实现鼠标悬浮态效果）
		769	+
		770	+该示例通过Button绑定Modifier实现了鼠标悬浮态的效果。当鼠标移动到Button上时，Button的背景颜色变为红色，此时为悬浮态效果；当鼠标离开Button时，Button的背景颜色变为黑色，此时为普通态效果；同时通过[applyHoveredAttribute](#applyhoveredattribute)接口设置悬浮态样式。
		771	+
		772	+从API版本26.0.0开始，新增[applyHoveredAttribute](#applyhoveredattribute)接口。
		773	+```ts
		774	+// xxx.ets
		775	+// 设置Button组件属性的自定义AttributeModifier
		776	+class MyButtonModifier implements AttributeModifier<ButtonAttribute> {
		777	+ applyNormalAttribute(instance: ButtonAttribute): void {
		778	+ instance.backgroundColor(Color.Black);
		779	+ }
		780	+
		781	+ // 设置悬浮态样式
		782	+ applyHoveredAttribute(instance: ButtonAttribute): void {
		783	+ instance.backgroundColor(Color.Red);
		784	+ }
		785	+}
		786	+
		787	+@Entry
		788	+@Component
		789	+struct attributeHoveredDemo {
		790	+ @State modifier: MyButtonModifier = new MyButtonModifier();
		791	+
		792	+ build() {
		793	+ Row() {
		794	+ Column() {
		795	+ Button('Button')
		796	+ .attributeModifier(this.modifier)
		797	+ }
		798	+ .width('100%')
		799	+ }
		800	+ .height('100%')
		801	+ }
		802	+}
		803	+```
		804	+
		805	+![attributeModifier_hoverState](figures/attributeModifier_hoverState.gif)

Mzh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-universal-attributes-polymorphic-style.md+54-22

@@ -19,6 +19,8 @@

19

> - 当前多态样式实现依赖于组件自定义节点的刷新机制。因Builder不具备独立的自定义父节点，无法直接触发刷新，致使多态样式无法直接在Builder中生效。解决方法是将多态样式封装至自定义组件内部，再将此组件置于@Builder中，以此来间接实现多态样式。示例代码可参考[示例3（设置Builder多态样式）](#示例3设置builder多态样式)。

19

> - 当前多态样式实现依赖于组件自定义节点的刷新机制。因Builder不具备独立的自定义父节点，无法直接触发刷新，致使多态样式无法直接在Builder中生效。解决方法是将多态样式封装至自定义组件内部，再将此组件置于@Builder中，以此来间接实现多态样式。示例代码可参考[示例3（设置Builder多态样式）](#示例3设置builder多态样式)。

20

>

20

>

21

> - 多态样式的焦点态只有在[焦点激活态](../../../ui/arkts-common-events-focus-event.md#基础概念)开启时生效。

21

> - 多态样式的焦点态只有在[焦点激活态](../../../ui/arkts-common-events-focus-event.md#基础概念)开启时生效。

22

+>

23

+> - 如果组件同时处于多种状态，并且分别在各自的状态里设置了一样的属性，那么最终样式生效的顺序由开发者设置的顺序决定，样式生效的顺序为后设置的生效。

A

A agentic-workflow5月27日

❌疑似检测出表达重复问题

错误原因：句子重复表述"样式生效的顺序"，且"为后设置的生效"表达不够清晰。建议修改为：

改动建议

23	- > - 如果组件同时处于多种状态，并且分别在各自的状态里设置了一样的属性，那么最终样式生效的顺序由开发者设置的~~顺序决定，~~样式~~生效的顺序为后设置的生效~~。
23	+ > - 如果组件同时处于多种状态，并且分别在各自的状态里设置了一样的属性，那么最终生效的样式由开发者最后设置的样式决定。

应用建议

💡 温馨提示：请审视上述建议的准确性。若您认为检测结果不合理或属于误报，请通过反馈通道告知我们。您的反馈对于提升 AI 检测精度的意义重大，我们将据此持续改进此工具

22

24

23

## stateStyles

25

## stateStyles

24

26

@@ -50,18 +52,17 @@ stateStyles(value: StateStyles): T

50

52

51

## StateStyles

53

## StateStyles

52

54

53

-**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。

54

-

55

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

55

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

56

57

| 名称 | 类型 | 只读 | 可选 | 说明 |

57

| 名称 | 类型 | 只读 | 可选 | 说明 |

58

| -------- | -------- | -------- | -------- | -------- |

58

| -------- | -------- | -------- | -------- | -------- |

59

-| normal | any | 否 | 是 | 组件无状态时的样式。 **卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 |

59

+| normal | any | 否 | 是 | 组件无状态时的样式。 **卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 **原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 |

60

-| pressed | any | 否 | 是 | 组件按下状态的样式。 **卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 |

60

+| pressed | any | 否 | 是 | 组件按下状态的样式。 **卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 **原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 |

61

-| disabled | any | 否 | 是 | 组件禁用状态的样式。 **卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 |

61

+| disabled | any | 否 | 是 | 组件禁用状态的样式。 **卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 **原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 |

62

-| focused | any | 否 | 是 | 组件获焦状态的样式。 **卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 |

62

+| focused | any | 否 | 是 | 组件获焦状态的样式。 **卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 **原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 |

63

-| clicked | any | 否 | 是 | 组件点击状态的样式。 **卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 |

63

+| clicked | any | 否 | 是 | 组件点击状态的样式。 **卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 **原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 |

64

-| selected10+ | object | 否 | 是 | 组件选中状态的样式。 **卡片能力：** 从API version 10开始，该接口支持在ArkTS卡片中使用。 **模型约束：** 此接口仅可在Stage模型下使用。 |

64

+| selected10+ | object | 否 | 是 | 组件选中状态的样式。 **卡片能力：** 从API version 10开始，该接口支持在ArkTS卡片中使用。 **原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 **模型约束：** 此接口仅可在Stage模型下使用。 |

65

+| hovered | object | 否 | 是 | 组件悬浮状态的样式。 **起始版本：** 26.0.0 **原子化服务API：** 从API版本26.0.0开始，该接口支持在原子化服务中使用。 **模型约束：** 此接口仅可在Stage模型下使用。 |

liujing5月25日

上边的属性说明里统一补充“原子化服务”说明；表格上边的原子化说明删掉。

Yun-xier

5月25日评论：

65

66

**selected选中状态说明**

67

**selected选中状态说明**

67

68

@@ -87,7 +88,9 @@ stateStyles(value: StateStyles): T

87

88

### 示例1（设置Text多态样式）

89

### 示例1（设置Text多态样式）

89

90

-该示例展示了状态为pressed和disabled时Text组件的样式变化。

91

+该示例展示了[stateStyles](#statestyles)设置状态为hovered、pressed和disabled时Text组件的样式变化。

92

+

93

+从API版本26.0.0开始，[stateStyles](#statestyles)新增hovered属性。

91

94

92

```ts

95

```ts

93

// xxx.ets

96

// xxx.ets

@@ -97,12 +100,24 @@ struct StyleExample {

97

@State isEnable: boolean = true

100

@State isEnable: boolean = true

98

101

99

@Styles

102

@Styles

100

- pressedStyles(): void {

103

+ hoveredStyles(): void {

101

- .backgroundColor("#ED6F21")

104

+ .backgroundColor('#12db70')

102

.borderRadius(10)

105

.borderRadius(10)

103

.borderStyle(BorderStyle.Dashed)

106

.borderStyle(BorderStyle.Dashed)

104

.borderWidth(2)

107

.borderWidth(2)

105

- .borderColor("#33000000")

108

+ .borderColor('#33000000')

109

+ .width(120)

110

+ .height(30)

111

+ .opacity(1)

112

+ }

113

+

114

+ @Styles

115

+ pressedStyles(): void {

116

+ .backgroundColor('#ED6F21')

117

+ .borderRadius(10)

118

+ .borderStyle(BorderStyle.Dashed)

119

+ .borderWidth(2)

120

+ .borderColor('#33000000')

106

.width(120)

121

.width(120)

107

.height(30)

122

.height(30)

108

.opacity(1)

123

.opacity(1)

@@ -110,11 +125,11 @@ struct StyleExample {

110

125

111

@Styles

126

@Styles

112

disabledStyles(): void {

127

disabledStyles(): void {

113

- .backgroundColor("#E5E5E5")

128

+ .backgroundColor('#E5E5E5')

114

.borderRadius(10)

129

.borderRadius(10)

115

.borderStyle(BorderStyle.Solid)

130

.borderStyle(BorderStyle.Solid)

116

.borderWidth(2)

131

.borderWidth(2)

117

- .borderColor("#2a4c1919")

132

+ .borderColor('#2a4c1919')

118

.width(90)

133

.width(90)

119

.height(25)

134

.height(25)

120

.opacity(1)

135

.opacity(1)

@@ -122,11 +137,11 @@ struct StyleExample {

122

137

123

@Styles

138

@Styles

124

normalStyles(): void {

139

normalStyles(): void {

125

- .backgroundColor("#0A59F7")

140

+ .backgroundColor('#0A59F7')

126

.borderRadius(10)

141

.borderRadius(10)

127

.borderStyle(BorderStyle.Solid)

142

.borderStyle(BorderStyle.Solid)

128

.borderWidth(2)

143

.borderWidth(2)

129

- .borderColor("#33000000")

144

+ .borderColor('#33000000')

130

.width(100)

145

.width(100)

131

.height(25)

146

.height(25)

132

.opacity(1)

147

.opacity(1)

@@ -134,7 +149,7 @@ struct StyleExample {

134

149

135

build() {

150

build() {

136

Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) {

151

Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) {

137

- Text("normal")

152

+ Text('normal')

138

.fontSize(14)

153

.fontSize(14)

139

.fontColor(Color.White)

154

.fontColor(Color.White)

140

.opacity(0.5)

155

.opacity(0.5)

@@ -144,8 +159,25 @@ struct StyleExample {

144

})

159

})

145

.margin({ bottom: 20 })

160

.margin({ bottom: 20 })

146

.textAlign(TextAlign.Center)

161

.textAlign(TextAlign.Center)

147

- Text("pressed")

162

+ Text('hovered')

148

- .backgroundColor("#0A59F7")

163

+ .backgroundColor('#0A59F7')

164

+ .borderRadius(20)

165

+ .borderStyle(BorderStyle.Dotted)

166

+ .borderWidth(2)

167

+ .borderColor(Color.Red)

168

+ .width(100)

169

+ .height(25)

170

+ .opacity(1)

171

+ .fontSize(14)

172

+ .fontColor(Color.White)

173

+ // stateStyles设置组件鼠标悬浮状态时的样式

174

+ .stateStyles({

175

+ hovered: this.hoveredStyles,

176

+ })

177

+ .margin({ bottom: 20 })

178

+ .textAlign(TextAlign.Center)

179

+ Text('pressed')

180

+ .backgroundColor('#0A59F7')

149

.borderRadius(20)

181

.borderRadius(20)

150

.borderStyle(BorderStyle.Dotted)

182

.borderStyle(BorderStyle.Dotted)

151

.borderWidth(2)

183

.borderWidth(2)

@@ -161,8 +193,8 @@ struct StyleExample {

161

})

193

})

162

.margin({ bottom: 20 })

194

.margin({ bottom: 20 })

163

.textAlign(TextAlign.Center)

195

.textAlign(TextAlign.Center)

164

- Text(this.isEnable == true ? "effective" : "disabled")

196

+ Text(this.isEnable == true ? 'effective' : 'disabled')

165

- .backgroundColor("#0A59F7")

197

+ .backgroundColor('#0A59F7')

166

.borderRadius(20)

198

.borderRadius(20)

167

.borderStyle(BorderStyle.Solid)

199

.borderStyle(BorderStyle.Solid)

168

.borderWidth(2)

200

.borderWidth(2)

@@ -178,7 +210,7 @@ struct StyleExample {

178

disabled: this.disabledStyles,

210

disabled: this.disabledStyles,

179

})

211

})

180

.textAlign(TextAlign.Center)

212

.textAlign(TextAlign.Center)

181

- Text("control disabled")

213

+ Text('control disabled')

182

.onClick(() => {

214

.onClick(() => {

183

this.isEnable = !this.isEnable

215

this.isEnable = !this.isEnable

184

console.info(`${this.isEnable}`)

216

console.info(`${this.isEnable}`)

Mzh-cn/application-dev/reference/apis-arkui/capi-native-type-h.md+1-0

	@@ -3283,6 +3283,7 @@ enum ArkUI_UIState
3283	\| UI_STATE_FOCUSED = 1 << 1 \| 获焦状态。 \|	3283	\| UI_STATE_FOCUSED = 1 << 1 \| 获焦状态。 \|
3284	\| UI_STATE_DISABLED = 1 << 2 \| 禁用状态。 \|	3284	\| UI_STATE_DISABLED = 1 << 2 \| 禁用状态。 \|
3285	\| UI_STATE_SELECTED = 1 << 3 \| 选中状态，此状态仅由某些特定类型的组件支持，分别是Checkbox、Radio、Toggle、List、Grid和MenuItem。 \|	3285	\| UI_STATE_SELECTED = 1 << 3 \| 选中状态，此状态仅由某些特定类型的组件支持，分别是Checkbox、Radio、Toggle、List、Grid和MenuItem。 \|
		3286	+\| UI_STATE_HOVERED = 1 << 4 \| 悬浮状态。<br/>起始版本： 26.0.0 \|
3286		3287
3287	### ArkUI_FocusWrapMode	3288	### ArkUI_FocusWrapMode
3288		3289

Azh-cn/application-dev/reference/apis-arkui/figures/frameNode_stateStyles.gif+0-0

Mzh-cn/application-dev/reference/apis-arkui/js-apis-arkui-frameNode.md+21-13

	@@ -114,19 +114,18 @@ import { FrameNode, LayoutConstraint, ExpandMode, ChildrenCountMode, typeNode, N
114		114
115	多态样式状态枚举，用于处理多态样式。	115	多态样式状态枚举，用于处理多态样式。
116		116
117	-原子化服务API：从API version 20开始，该接口支持在原子化服务中使用。
118	-
119	模型约束：此接口仅可在Stage模型下使用。	117	模型约束：此接口仅可在Stage模型下使用。
120		118
121	系统能力： SystemCapability.ArkUI.ArkUI.Full	119	系统能力： SystemCapability.ArkUI.ArkUI.Full
122		120
123	\| 名称 \| 值 \| 说明 \|	121	\| 名称 \| 值 \| 说明 \|
124	\| -------- \| -------- \| -------- \|	122	\| -------- \| -------- \| -------- \|
125	-\| NORMAL \| 0 \| 正常状态。 \|	123	+\| NORMAL \| 0 \| 正常状态。 <br/>原子化服务API：从API version 20开始，该接口支持在原子化服务中使用。 \|
126	-\| PRESSED \| 1 << 0 \| 按下状态。 \|	124	+\| PRESSED \| 1 << 0 \| 按下状态。 <br/>原子化服务API：从API version 20开始，该接口支持在原子化服务中使用。 \|
127	-\| FOCUSED \| 1 << 1 \| 获焦状态。 \|	125	+\| FOCUSED \| 1 << 1 \| 获焦状态。 <br/>原子化服务API：从API version 20开始，该接口支持在原子化服务中使用。 \|
128	-\| DISABLED \| 1 << 2 \| 禁用状态。 \|	126	+\| DISABLED \| 1 << 2 \| 禁用状态。 <br/>原子化服务API：从API version 20开始，该接口支持在原子化服务中使用。 \|
129	-\| SELECTED \| 1 << 3 \| 选中状态。<br/>仅特定的组件支持此状态：Checkbox、Radio、Toggle、List、Grid、MenuItem。 \|	127	+\| SELECTED \| 1 << 3 \| 选中状态。 <br/>仅特定的组件支持此状态：Checkbox、Radio、Toggle、List、Grid、MenuItem。 <br/>原子化服务API：从API version 20开始，该接口支持在原子化服务中使用。 \|
		128	+\| HOVERED \| 1 << 4 \| 悬浮状态。<br/>起始版本： 26.0.0 <br/>原子化服务API：从API版本26.0.0开始，该接口支持在原子化服务中使用。 \|
130		129
131	## UIStatesChangeHandler<sup>20+</sup>	130	## UIStatesChangeHandler<sup>20+</sup>
132		131
	@@ -11079,6 +11078,8 @@ struct Index {
11079		11078
11080	## 组件设置和删除多态样式状态示例	11079	## 组件设置和删除多态样式状态示例
11081		11080
		刘睿5月26日缺少版本描述，写清楚从API版本**开始，支持。，。。。 Yun-xier 5月26日评论： 5月26日评论：
		11081	+从API版本26.0.0开始，[UIState](#uistate20)新增HOVERED枚举。
		11082	+
11082	```ts	11083	```ts
11083	import { NodeController, FrameNode, typeNode, UIState } from '@kit.ArkUI';	11084	import { NodeController, FrameNode, typeNode, UIState } from '@kit.ArkUI';
11084		11085
	@@ -11086,7 +11087,7 @@ import { NodeController, FrameNode, typeNode, UIState } from '@kit.ArkUI';
11086	class MyNodeController extends NodeController {	11087	class MyNodeController extends NodeController {
11087	private isEnable: boolean = true;	11088	private isEnable: boolean = true;
11088	private theStatesToBeSupported =	11089	private theStatesToBeSupported =
11089	- UIState.NORMAL \| UIState.PRESSED \| UIState.FOCUSED \| UIState.DISABLED \| UIState.SELECTED;	11090	+ UIState.NORMAL \| UIState.PRESSED \| UIState.FOCUSED \| UIState.DISABLED \| UIState.SELECTED \| UIState.HOVERED;
11090		11091
11091	makeNode(uiContext: UIContext): FrameNode \| null {	11092	makeNode(uiContext: UIContext): FrameNode \| null {
11092	// 创建并组织节点关系	11093	// 创建并组织节点关系
	@@ -11119,31 +11120,36 @@ class MyNodeController extends NodeController {
11119	// 为Text组件添加多态样式处理能力	11120	// 为Text组件添加多态样式处理能力
11120	styleText.addSupportedUIStates(this.theStatesToBeSupported, (node: FrameNode, currentState: number) => {	11121	styleText.addSupportedUIStates(this.theStatesToBeSupported, (node: FrameNode, currentState: number) => {
11121	if (currentState == UIState.NORMAL) { // 判断是否normal要使用等于	11122	if (currentState == UIState.NORMAL) { // 判断是否normal要使用等于
11122	- // normal状态，刷normal的UI效果	11123	+ // normal状态，刷新普通状态的UI效果
11123	console.info('Callback UIState.NORMAL')	11124	console.info('Callback UIState.NORMAL')
11124	node.commonAttribute.backgroundColor(Color.Green)	11125	node.commonAttribute.backgroundColor(Color.Green)
11125	node.commonAttribute.borderWidth(2)	11126	node.commonAttribute.borderWidth(2)
11126	node.commonAttribute.borderColor(Color.Black)	11127	node.commonAttribute.borderColor(Color.Black)
11127	}	11128	}
		11129	+ if ((currentState & UIState.HOVERED) == UIState.HOVERED) {
		11130	+ // hovered状态，刷新悬浮状态的UI效果
		11131	+ console.info('Callback UIState.HOVERED')
		11132	+ node.commonAttribute.backgroundColor(Color.Blue)
		11133	+ }
11128	if ((currentState & UIState.PRESSED) == UIState.PRESSED) {	11134	if ((currentState & UIState.PRESSED) == UIState.PRESSED) {
11129	- // press状态，刷press的UI效果	11135	+ // pressed状态，刷新按压状态的UI效果
11130	console.info('Callback UIState.PRESSED')	11136	console.info('Callback UIState.PRESSED')
11131	node.commonAttribute.backgroundColor(Color.Brown)	11137	node.commonAttribute.backgroundColor(Color.Brown)
11132	}	11138	}
11133	if ((currentState & UIState.FOCUSED) == UIState.FOCUSED) {	11139	if ((currentState & UIState.FOCUSED) == UIState.FOCUSED) {
11134	- // focused状态，刷focused的UI效果	11140	+ // focused状态，刷新获焦状态的UI效果
11135	console.info('Callback UIState.FOCUSED')	11141	console.info('Callback UIState.FOCUSED')
11136	node.commonAttribute.borderWidth(5)	11142	node.commonAttribute.borderWidth(5)
11137	node.commonAttribute.borderColor(Color.Yellow)	11143	node.commonAttribute.borderColor(Color.Yellow)
11138	}	11144	}
11139	if ((currentState & UIState.DISABLED) == UIState.DISABLED) {	11145	if ((currentState & UIState.DISABLED) == UIState.DISABLED) {
11140	- // disabled状态，刷disabled的UI效果	11146	+ // disabled状态，刷新禁用状态的UI效果
11141	console.info('Callback UIState.DISABLED')	11147	console.info('Callback UIState.DISABLED')
11142	node.commonAttribute.backgroundColor(Color.Gray)	11148	node.commonAttribute.backgroundColor(Color.Gray)
11143	node.commonAttribute.borderWidth(0)	11149	node.commonAttribute.borderWidth(0)
11144	}	11150	}
11145	if ((currentState & UIState.SELECTED) == UIState.SELECTED) {	11151	if ((currentState & UIState.SELECTED) == UIState.SELECTED) {
11146	- // selected状态，刷selected的UI效果	11152	+ // selected状态，刷新选中状态的UI效果
11147	console.info('Callback UIState.SELECTED')	11153	console.info('Callback UIState.SELECTED')
11148	node.commonAttribute.backgroundColor(Color.Pink)	11154	node.commonAttribute.backgroundColor(Color.Pink)
11149	}	11155	}
	@@ -11193,6 +11199,8 @@ struct FrameNodeTypeTest {
11193	}	11199	}
11194	```	11200	```
11195		11201
		11202	+![frameNode_stateStyles](./figures/frameNode_stateStyles.gif)
		11203	+
11196	## 动画创建与取消示例	11204	## 动画创建与取消示例
11197		11205
11198	该示例说明在FrameNode上[createAnimation](#createanimation20)、[cancelAnimations](#cancelanimations20)、[getNodePropertyValue](#getnodepropertyvalue20)接口的用法。	11206	该示例说明在FrameNode上[createAnimation](#createanimation20)、[cancelAnimations](#cancelanimations20)、[getNodePropertyValue](#getnodepropertyvalue20)接口的用法。