1# Button 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @liyi0309--> 5<!--Designer: @liyi0309--> 6<!--Tester: @lxl007--> 7<!--Adviser: @HelloCrease--> 8 9按钮组件，可快速创建不同样式的按钮。 10 11> **说明：** 12> 13> 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 14 15 16## 子组件 17 18可以包含单个子组件。 19 20 21## 接口 22 23### Button 24 25Button(options: ButtonOptions) 26 27创建可以包含单个子组件的按钮。 28 29**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 30 31**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 32 33**系统能力：** SystemCapability.ArkUI.ArkUI.Full 34 35**参数：** 36 37| 参数名 | 类型 | 必填 | 说明 | 38| ------- | --------------------------------------- | ---- | -------------------- | 39| options | [ButtonOptions](#buttonoptions对象说明) | 是 | 配置按钮的显示样式。 | 40 41### Button 42 43Button(label: ResourceStr, options?: ButtonOptions) 44 45使用文本内容创建相应的按钮组件，此时Button无法包含子组件。 46 47文本内容默认单行显示。 48 49**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 50 51**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 52 53**系统能力：** SystemCapability.ArkUI.ArkUI.Full 54 55**参数：** 56 57| 参数名 | 类型 | 必填 | 说明 | 58| ------- | --------------------------------------- | ---- | -------------------- | 59| label | [ResourceStr](ts-types.md#resourcestr) | 是 | 按钮文本内容。<br/>**说明：** 当文本字符的长度超过按钮本身的宽度时，文本将会被截断。 | 60| options | [ButtonOptions](#buttonoptions对象说明) | 否 | 配置按钮的显示样式。 | 61 62### Button 63 64Button() 65 66创建一个空按钮。 67 68**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 69 70**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 71 72**系统能力：** SystemCapability.ArkUI.ArkUI.Full 73 74## ButtonOptions对象说明 75 76按钮的样式。 77 78**系统能力：** SystemCapability.ArkUI.ArkUI.Full 79 80| 名称 | 类型 | 只读 | 可选 | 说明 | 81| ------------------------- | --------------------------------------------- | ---- | ------------------------------------------------------------ | ------------------------------------------------------------ | 82| type | [ButtonType](#buttontype枚举说明) | 否 | 是 | 按钮显示样式。<br/>默认值：ButtonType.ROUNDED_RECTANGLE<br/>从API version 18及之后，ButtonType的默认值修改为ButtonType.ROUNDED_RECTANGLE。API version 18之前的版本，ButtonType的默认值为ButtonType.Capsule。<br/>**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 83| stateEffect | boolean | 否 | 是 | 按钮按下时是否开启按压态显示效果，当设置为false时，按压效果关闭。设置为true时，开启按压效果。<br/>默认值：true<br/>**说明：** <br/>当开启按压态显示效果，开发者设置状态样式时，会基于状态样式设置完成后的背景色再进行颜色叠加。<br/>**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 84| buttonStyle<sup>11+</sup> | [ButtonStyleMode](#buttonstylemode11枚举说明) | 否 | 是 | 按钮的样式和重要程度。<br/>默认值：ButtonStyleMode.EMPHASIZED <br/>**说明：** <br/>按钮重要程度：强调按钮>普通按钮>文字按钮。<br/>**卡片能力：** 从API version 11开始，该接口支持在ArkTS卡片中使用。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 85| controlSize<sup>11+</sup> | [ControlSize](#controlsize11枚举说明) | 否 | 是 | 按钮的尺寸。<br/>默认值：ControlSize.NORMAL<br/>**卡片能力：** 从API version 11开始，该接口支持在ArkTS卡片中使用。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 86| role<sup>12+</sup> | [ButtonRole](#buttonrole12枚举说明) | 否 | 是 | 按钮的角色。<br/>默认值：ButtonRole.NORMAL <br/>**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 87 88## 属性 89 90除支持[通用属性](ts-component-general-attributes.md)外，还支持以下属性： 91 92### type 93 94type(value: ButtonType) 95 96设置Button样式。 97 98**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 99 100**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 101 102**系统能力：** SystemCapability.ArkUI.ArkUI.Full 103 104**参数：** 105 106| 参数名 | 类型 | 必填 | 说明 | 107| ------ | --------------------------------- | ---- | ------------------------------------------- | 108| value | [ButtonType](#buttontype枚举说明) | 是 | Button样式。<br/>从API version 18及之后，ButtonType的默认值修改为ButtonType.ROUNDED_RECTANGLE。API version 18之前的版本，ButtonType的默认值为ButtonType.Capsule。 | 109 110### fontSize 111 112fontSize(value: Length) 113 114设置文本显示字号。 115 116**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 117 118**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 119 120**系统能力：** SystemCapability.ArkUI.ArkUI.Full 121 122**参数：** 123 124| 参数名 | 类型 | 必填 | 说明 | 125| ------ | ---------------------------- | ---- | ------------------------------------------------------------ | 126| value | [Length](ts-types.md#length) | 是 | 文本显示字号。<br/>默认值：当controlSize为ControlSize.NORMAL时，默认值为`$r('sys.float.Body_L')`。<br/>当controlSize为ControlSize.SMALL时，默认值为`$r('sys.float.Body_S')`。<br/>**说明**：设置string类型时，不支持百分比。 | 127 128### fontColor 129 130fontColor(value: ResourceColor) 131 132设置文本显示颜色。 133 134**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 135 136**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 137 138**系统能力：** SystemCapability.ArkUI.ArkUI.Full 139 140**参数：** 141 142| 参数名 | 类型 | 必填 | 说明 | 143| ------ | ------------------------------------------ | ---- | ------------------------------------------------------------ | 144| value | [ResourceColor](ts-types.md#resourcecolor) | 是 | 文本显示颜色。<br/>默认值：$r('sys.color.font_on_primary')，显示为白色字体。 | 145 146### fontWeight 147 148fontWeight(value: number | FontWeight | string) 149 150设置文本的字体粗细。 151 152**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 153 154**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 155 156**系统能力：** SystemCapability.ArkUI.ArkUI.Full 157 158**参数：** 159 160| 参数名 | 类型 | 必填 | 说明 | 161| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 162| value | number \| [FontWeight](ts-appendix-enums.md#fontweight) \| string | 是 | 文本的字体粗细，number类型取值[100, 900]，取值间隔为100，取值越大，字体越粗。<br>默认值：500<br/>string类型仅支持number类型取值的字符串形式，例如'400'，以及'bold'、'bolder'、'lighter'、'regular'、'medium'，分别对应FontWeight中相应的枚举值。<br/>当值为异常值或非法值时，字体粗细取值为400。 | 163 164### fontStyle<sup>8+</sup> 165 166fontStyle(value: FontStyle) 167 168设置文本的字体样式。 169 170**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 171 172**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 173 174**系统能力：** SystemCapability.ArkUI.ArkUI.Full 175 176**参数：** 177 178| 参数名 | 类型 | 必填 | 说明 | 179| ------ | ------------------------------------------- | ---- | ----------------------------------------------- | 180| value | [FontStyle](ts-appendix-enums.md#fontstyle) | 是 | 文本的字体样式。<br/>默认值：FontStyle.Normal | 181 182### stateEffect 183 184stateEffect(value: boolean) 185 186设置是否开启按压态显示效果。 187 188**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 189 190**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 191 192**系统能力：** SystemCapability.ArkUI.ArkUI.Full 193 194**参数：** 195 196| 参数名 | 类型 | 必填 | 说明 | 197| ------ | ------- | ---- | ------------------------------------------------------------ | 198| value | boolean | 是 | 按钮按下时是否开启按压态显示效果，当设置为false时，按压效果关闭。设置为true时，开启按压效果。<br/>默认值：true | 199 200> **说明：** 201> 202> 使用多态样式设置按压态时，需优先设置stateEffect为false，防止内置按压态与多态样式按压态冲突。 203 204### fontFamily<sup>8+</sup> 205 206fontFamily(value: string | Resource) 207 208设置字体列表。 209 210**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 211 212**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 213 214**系统能力：** SystemCapability.ArkUI.ArkUI.Full 215 216**参数：** 217 218| 参数名 | 类型 | 必填 | 说明 | 219| ------ | ---------------------------------------------------- | ---- | ------------------------------------------------------------ | 220| value | string \| [Resource](ts-types.md#resource) | 是 | 字体列表。默认字体'HarmonyOS Sans'，当前支持'HarmonyOS Sans'字体和[注册自定义字体](../js-apis-font.md)。 | 221 222### labelStyle<sup>10+</sup> 223 224labelStyle(value: LabelStyle) 225 226设置Button组件label文本和字体的样式。 227 228**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 229 230**系统能力：** SystemCapability.ArkUI.ArkUI.Full 231 232**参数：** 233 234| 参数名 | 类型 | 必填 | 说明 | 235| ------ | ----------------------------------- | ---- | --------------------------------- | 236| value | [LabelStyle](#labelstyle10对象说明) | 是 | Button组件label文本和字体的样式。 | 237 238### buttonStyle<sup>11+</sup> 239 240buttonStyle(value: ButtonStyleMode) 241 242设置Button组件的样式和重要程度。 243 244**卡片能力：** 从API version 11开始，该接口支持在ArkTS卡片中使用。 245 246**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 247 248**系统能力：** SystemCapability.ArkUI.ArkUI.Full 249 250**参数：** 251 252| 参数名 | 类型 | 必填 | 说明 | 253| ------ | --------------------------------------------- | ---- | ------------------------------------------------------------ | 254| value | [ButtonStyleMode](#buttonstylemode11枚举说明) | 是 | Button组件的样式和重要程度。<br/>默认值：ButtonStyleMode.EMPHASIZED | 255 256### controlSize<sup>11+</sup> 257 258controlSize(value: ControlSize) 259 260设置Button组件的尺寸。 261 262**卡片能力：** 从API version 11开始，该接口支持在ArkTS卡片中使用。 263 264**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 265 266**系统能力：** SystemCapability.ArkUI.ArkUI.Full 267 268**参数：** 269 270| 参数名 | 类型 | 必填 | 说明 | 271| ------ | ------------------------------------- | ---- | ------------------------------------------------- | 272| value | [ControlSize](#controlsize11枚举说明) | 是 | Button组件的尺寸。<br/>默认值：ControlSize.NORMAL | 273 274### role<sup>12+</sup> 275 276role(value: ButtonRole) 277 278设置Button组件的角色。 279 280**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 281 282**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 283 284**系统能力：** SystemCapability.ArkUI.ArkUI.Full 285 286**参数：** 287 288| 参数名 | 类型 | 必填 | 说明 | 289| ------ | ----------------------------------- | ---- | ---------------------------------------------------- | 290| value | [ButtonRole](#buttonrole12枚举说明) | 是 | 设置Button组件的角色。<br/>默认值：ButtonRole.NORMAL | 291 292### contentModifier<sup>12+</sup> 293 294contentModifier(modifier: ContentModifier\<ButtonConfiguration>) 295 296定制Button内容区的方法。 297 298**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 299 300**系统能力：** SystemCapability.ArkUI.ArkUI.Full 301 302**参数：** 303 304| 参数名 | 类型 | 必填 | 说明 | 305| ------ | --------------------------------------------- | ---- | ------------------------------------------------ | 306| modifier | [ContentModifier\<ButtonConfiguration>](#buttonconfiguration12对象说明) | 是 | 在Button组件上，定制内容区的方法。<br/>modifier：内容修改器，开发者需要自定义class实现ContentModifier接口。 | 307 308### minFontScale<sup>18+</sup> 309 310minFontScale(scale: number | Resource) 311 312设置文本最小的字体缩放倍数。 313 314**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 315 316**系统能力：** SystemCapability.ArkUI.ArkUI.Full 317 318**参数：** 319 320| 参数名 | 类型 | 必填 | 说明 | 321| ------ | --------------------------------------------- | ---- | --------------------------------------------- | 322| scale | number \| [Resource](ts-types.md#resource) | 是 | 文本最小的字体缩放倍数。<br/>取值范围：[0, 1]<br/>**说明：** <br/>设置的值小于0时，按值为0处理，设置的值大于1，按值为1处理，异常值默认不生效。 | 323 324### maxFontScale<sup>18+</sup> 325 326maxFontScale(scale: number | Resource) 327 328设置文本最大的字体缩放倍数。 329 330**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 331 332**系统能力：** SystemCapability.ArkUI.ArkUI.Full 333 334**参数：** 335 336| 参数名 | 类型 | 必填 | 说明 | 337| ------ | --------------------------------------------- | ---- | --------------------------------------------- | 338| scale | number \| [Resource](ts-types.md#resource) | 是 | 文本最大的字体缩放倍数。<br/>取值范围：[1, +∞)<br/>**说明：** <br/>设置的值小于1时，按值为1处理，异常值默认不生效。<br/>未设置最大缩放倍数时，圆形按钮最大缩放倍数为1倍，胶囊型按钮、普通按钮、圆角矩形按钮最大缩放倍数跟随系统设置。 | 339 340## ButtonType枚举说明 341 342按钮的类型。 343 344**系统能力：** SystemCapability.ArkUI.ArkUI.Full 345 346| 名称 | 说明 | 347| ------- | ------------------ | 348| Capsule | 胶囊型按钮（圆角默认为高度的一半）。**<br>卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。**<br>原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 349| Circle | 圆形按钮。**<br>卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。**<br>原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 350| Normal | 普通按钮（默认不带圆角）。 **<br>卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。**<br>原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 351| ROUNDED_RECTANGLE<sup>15+</sup> | 圆角矩形按钮（默认值：controlSize为NORMAL，圆角大小20vp，controlSize为SMALL，圆角大小14vp）。**<br>卡片能力：** 从API version 15开始，该接口支持在ArkTS卡片中使用。**<br>原子化服务API：** 从API version 15开始，该接口支持在原子化服务中使用。 | 352 353> **说明：** 354> - 按钮圆角通过[通用属性borderRadius](ts-universal-attributes-border.md#borderradius)设置。 355> - 当按钮类型为Capsule时，borderRadius设置不生效，按钮圆角始终为宽、高中较小值的一半。 356> - 当按钮类型为Circle时，若同时设置了宽和高，则borderRadius不生效，且按钮半径为宽高中较小值的一半；若只设置宽、高中的一个，则borderRadius不生效，且按钮半径为所设宽或所设高值的一半；若不设置宽高，则borderRadius为按钮半径；若borderRadius的值为负，则borderRadius的值按照0处理。 357> - 按钮文本通过[fontSize](#fontsize)、[fontColor](#fontcolor)、[fontStyle](#fontstyle8)、[fontFamily](#fontfamily8)、[fontWeight](#fontweight)进行设置。 358> - 设置[颜色渐变](ts-universal-attributes-gradient-color.md)需先设置[backgroundColor](ts-universal-attributes-background.md#backgroundcolor)为透明色。 359> - 在不设置borderRadius时，圆角矩形按钮的圆角大小保持默认值不变。圆角大小不会随按钮高度变化而变化，和controlSize属性有关，controlSize为NORMAL时圆角大小20vp，controlSize为SMALL时圆角大小14vp。 360> - 设置Button的[border](ts-universal-attributes-border.md#border)时，会有默认的[borderRadius](ts-universal-attributes-border.md#borderradius)值。如果同时使用`border`和`borderRadius`，需将`borderRadius`放在`border`之后，以确保`borderRadius`不会被`border`中的默认`radius`覆盖。 361按钮中文本的显示样式。 362 363## LabelStyle<sup>10+</sup>对象说明 364 365**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 366 367**系统能力：** SystemCapability.ArkUI.ArkUI.Full 368 369| 名称 | 类型 | 只读 | 可选 | 说明 | 370| -------------------- | ------------------------------------------------------------ | ---- | ---- | ------------------------------------------------------------ | 371| overflow | [TextOverflow](ts-appendix-enums.md#textoverflow) | 否 | 是 | 设置label文本超长时的显示方式。文本截断是按字截断。例如，英文以单词为最小单位进行截断，若需要以字母为单位进行截断，可在字母间添加零宽空格。<br>默认值：TextOverflow.Ellipsis | 372| maxLines | number | 否 | 是 | 设置label文本的最大行数。如果指定此参数，则文本最多不会超过指定的行。如果有多余的文本，可以通过overflow来指定截断方式。<br>默认值：1<br/>**说明：** <br/>设置小于等于0的值时，按默认值处理。 | 373| minFontSize | number \| [ResourceStr](ts-types.md#resourcestr) | 否 | 是 | 设置label文本最小显示字号。需配合maxFontSize以及maxLines或布局大小限制使用。<br/>**说明：** <br/>minFontSize小于或等于0时，自适应字号不生效。 | 374| maxFontSize | number \| [ResourceStr](ts-types.md#resourcestr) | 否 | 是 | 设置label文本最大显示字号。需配合minFontSize以及maxLines或布局大小限制使用。 | 375| heightAdaptivePolicy | [TextHeightAdaptivePolicy](ts-appendix-enums.md#textheightadaptivepolicy10) | 否 | 是 | 设置label文本自适应高度的方式。<br>默认值：TextHeightAdaptivePolicy.MAX_LINES_FIRST | 376| font | [Font](ts-types.md#font) | 否 | 是 | 设置label文本字体样式。<br>默认值：默认值参考[Font](ts-types.md#font)。 | 377 378## ButtonStyleMode<sup>11+</sup>枚举说明 379 380按钮的重要程度。 381 382**卡片能力：** 从API version 11开始，该接口支持在ArkTS卡片中使用。 383 384**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 385 386**系统能力：** SystemCapability.ArkUI.ArkUI.Full 387 388| 名称 | 值 | 说明 | 389| ------- | -- |------------------ | 390| NORMAL | 0 |普通按钮（一般界面操作）。 | 391| EMPHASIZED | 1 |强调按钮（用于强调当前操作）。 | 392| TEXTUAL | 2 |文本按钮（纯文本，无背景颜色）。 | 393 394## ControlSize<sup>11+</sup>枚举说明 395 396按钮的尺寸。 397 398**卡片能力：** 从API version 11开始，该接口支持在ArkTS卡片中使用。 399 400**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 401 402**系统能力：** SystemCapability.ArkUI.ArkUI.Full 403 404| 名称 | 值 |说明 | 405| ------- | -- |------------------ | 406| SMALL | "small" |小尺寸按钮。 | 407| NORMAL | "normal" |正常尺寸按钮。 | 408 409## ButtonRole<sup>12+</sup>枚举说明 410 411按钮的角色。 412 413**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 414 415**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 416 417**系统能力：** SystemCapability.ArkUI.ArkUI.Full 418 419| 名称 | 值 |说明 | 420| ------- | -- |------------------ | 421| NORMAL | 0 |正常按钮。 | 422| ERROR | 1 |警示按钮。 | 423 424## ButtonConfiguration<sup>12+</sup>对象说明 425 426开发者需要自定义class实现ContentModifier接口。继承自[CommonConfiguration](ts-universal-attributes-content-modifier.md#commonconfigurationt)。 427 428**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 429 430**系统能力：** SystemCapability.ArkUI.ArkUI.Full 431 432| 名称 | 类型 | 只读 | 可选 | 说明 | 433| ------ | ------ | ---------------- | ---------------- | ---------------- | 434| label | string | 否 | 否 | Button的文本标签。<br/>**说明**：当文本字符的长度超过按钮本身的宽度时，文本将会被截断。 | 435| pressed | boolean | 否 | 否 | 指示是否按下Button。值为true时，表示按下，值为false时，表示未按下。<br/>**说明：** <br/>此属性指示的是原本Button是否被按压，而非build出来的新组件。若新build出来的组件超过原本组件的大小，那么超出部分按压不触发。<br/>默认值：false | 436| triggerClick | [ButtonTriggerClickCallback](#buttontriggerclickcallback12) | 否 | 否 | 使用builder新构建出来组件的点击事件。 | 437 438## ButtonTriggerClickCallback<sup>12+</sup> 439 440type ButtonTriggerClickCallback = (xPos: number, yPos: number) => void 441 442定义ButtonConfiguration中使用的回调类型。 443 444**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 445 446**系统能力：** SystemCapability.ArkUI.ArkUI.Full 447 448**参数：** 449 450| 参数名 | 类型 | 必填 | 说明 | 451| ------ | ------ | ---- | ---------------- | 452| xPos | number | 是 | 点击位置x的坐标。<br/>单位：vp | 453| yPos | number | 是 | 点击位置y的坐标。<br/>单位：vp | 454 455## 事件 456 457支持[通用事件](ts-component-general-events.md)。 458## 示例 459 460### 示例1（设置按钮的显示样式） 461 462该示例实现了两种创建按钮的方式，包含子组件或使用文本内容创建相应的按钮。 463 464```ts 465// xxx.ets 466@Entry 467@Component 468struct ButtonExample { 469 build() { 470 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) { 471 Text('Normal button').fontSize(9).fontColor(0xCCCCCC) 472 Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { 473 Button('OK', { type: ButtonType.Normal, stateEffect: true }) 474 .borderRadius(8) 475 .backgroundColor(0x317aff) 476 .width(90) 477 .onClick(() => { 478 console.info('ButtonType.Normal'); 479 }) 480 Button({ type: ButtonType.Normal, stateEffect: true }) { 481 Row() { 482 LoadingProgress().width(20).height(20).margin({ left: 12 }).color(0xFFFFFF) 483 Text('loading').fontSize(12).fontColor(0xffffff).margin({ left: 5, right: 12 }) 484 }.alignItems(VerticalAlign.Center) 485 }.borderRadius(8).backgroundColor(0x317aff).width(90).height(40) 486 487 Button('Disable', { type: ButtonType.Normal, stateEffect: false }).opacity(0.4) 488 .borderRadius(8).backgroundColor(0x317aff).width(90) 489 } 490 491 Text('Capsule button').fontSize(9).fontColor(0xCCCCCC) 492 Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { 493 Button('OK', { type: ButtonType.Capsule, stateEffect: true }).backgroundColor(0x317aff).width(90) 494 Button({ type: ButtonType.Capsule, stateEffect: true }) { 495 Row() { 496 LoadingProgress().width(20).height(20).margin({ left: 12 }).color(0xFFFFFF) 497 Text('loading').fontSize(12).fontColor(0xffffff).margin({ left: 5, right: 12 }) 498 }.alignItems(VerticalAlign.Center).width(90).height(40) 499 }.backgroundColor(0x317aff) 500 501 Button('Disable', { type: ButtonType.Capsule, stateEffect: false }).opacity(0.4) 502 .backgroundColor(0x317aff).width(90) 503 } 504 505 Text('Circle button').fontSize(9).fontColor(0xCCCCCC) 506 Flex({ alignItems: ItemAlign.Center, wrap: FlexWrap.Wrap }) { 507 Button({ type: ButtonType.Circle, stateEffect: true }) { 508 LoadingProgress().width(20).height(20).color(0xFFFFFF) 509 }.width(55).height(55).backgroundColor(0x317aff) 510 511 Button({ type: ButtonType.Circle, stateEffect: true }) { 512 LoadingProgress().width(20).height(20).color(0xFFFFFF) 513 }.width(55).height(55).margin({ left: 20 }).backgroundColor(0xF55A42) 514 } 515 }.height(400).padding({ left: 35, right: 35, top: 35 }) 516 } 517} 518``` 519 520 521 522### 示例2 （为按钮添加渲染控制） 523 524该示例通过if/else控制按钮的显示文本。 525 526```ts 527// xxx.ets 528@Entry 529@Component 530struct SwipeGestureExample { 531 @State count: number = 0; 532 533 build() { 534 Column() { 535 Text(`${this.count}`) 536 .fontSize(30) 537 .onClick(() => { 538 this.count++; 539 }) 540 if (this.count <= 0) { 541 Button('count is negative').fontSize(30).height(50) 542 } else if (this.count % 2 === 0) { 543 Button('count is even').fontSize(30).height(50) 544 } else { 545 Button('count is odd').fontSize(30).height(50) 546 } 547 }.height('100%').width('100%').justifyContent(FlexAlign.Center) 548 } 549} 550``` 551 552 553 554### 示例3 （设置按钮文本样式） 555 556该示例通过配置labelStyle自定义按钮文本的显示样式。 557 558```ts 559// xxx.ets 560@Entry 561@Component 562struct buttonTestDemo { 563 @State txt: string = 'overflowTextOverLengthTextOverflow.Clip'; 564 @State widthShortSize: number = 205; 565 566 build() { 567 Row() { 568 Column() { 569 Button(this.txt) 570 .type(ButtonType.Capsule) 571 .width(this.widthShortSize) 572 .height(100) 573 .backgroundColor(0x317aff) 574 .labelStyle({ overflow: TextOverflow.Clip, 575 maxLines: 1, 576 minFontSize: 20, 577 maxFontSize: 20, 578 font: { 579 size: 20, 580 weight: FontWeight.Bolder, 581 family: 'cursive', 582 style: FontStyle.Italic 583 } 584 }) 585 .fontSize(40) 586 } 587 .width('100%') 588 } 589 .height('100%') 590 } 591} 592``` 593 594 595 596### 示例4（设置不同尺寸按钮的重要程度） 597 598该示例通过配置controlSize、buttonStyle实现不同尺寸按钮的重要程度。 599 600```ts 601// xxx.ets 602@Entry 603@Component 604struct ButtonExample { 605 build() { 606 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) { 607 Text('Normal size button').fontSize(9).fontColor(0xCCCCCC) 608 Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { 609 Button('Emphasized', { buttonStyle: ButtonStyleMode.EMPHASIZED }); 610 Button('Normal', { buttonStyle: ButtonStyleMode.NORMAL }); 611 Button('Textual', { buttonStyle: ButtonStyleMode.TEXTUAL }); 612 } 613 614 Text('Small size button').fontSize(9).fontColor(0xCCCCCC) 615 Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { 616 Button('Emphasized', { controlSize: ControlSize.SMALL, buttonStyle: ButtonStyleMode.EMPHASIZED }); 617 Button('Normal', { controlSize: ControlSize.SMALL, buttonStyle: ButtonStyleMode.NORMAL }); 618 Button('Textual', { controlSize: ControlSize.SMALL, buttonStyle: ButtonStyleMode.TEXTUAL }); 619 } 620 621 Text('Small size button').fontSize(9).fontColor(0xCCCCCC) 622 Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { 623 Button('Emphasized').controlSize(ControlSize.SMALL).buttonStyle(ButtonStyleMode.EMPHASIZED); 624 Button('Normal').controlSize(ControlSize.SMALL).buttonStyle(ButtonStyleMode.NORMAL); 625 Button('Textual').controlSize(ControlSize.SMALL).buttonStyle(ButtonStyleMode.TEXTUAL); 626 } 627 628 }.height(400).padding({ left: 35, right: 35, top: 35 }) 629 } 630} 631``` 632 633 634### 示例5（设置按钮的角色） 635 636该示例通过配置role实现按钮的角色。 637 638```ts 639// xxx.ets 640@Entry 641@Component 642struct ButtonExample { 643 build() { 644 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) { 645 Text('Role is Normal button').fontSize(9).fontColor(0xCCCCCC) 646 Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { 647 Button('Emphasized', { buttonStyle: ButtonStyleMode.EMPHASIZED, role: ButtonRole.NORMAL }); 648 Button('Normal', { buttonStyle: ButtonStyleMode.NORMAL, role: ButtonRole.NORMAL }); 649 Button('Textual', { buttonStyle: ButtonStyleMode.TEXTUAL, role: ButtonRole.NORMAL }); 650 } 651 Text('Role is Error button').fontSize(9).fontColor(0xCCCCCC) 652 Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { 653 Button('Emphasized', { buttonStyle: ButtonStyleMode.EMPHASIZED, role: ButtonRole.ERROR}); 654 Button('Normal', { buttonStyle: ButtonStyleMode.NORMAL, role: ButtonRole.ERROR }); 655 Button('Textual', { buttonStyle: ButtonStyleMode.TEXTUAL, role: ButtonRole.ERROR }); 656 } 657 }.height(200).padding({ left: 15, right: 15, top: 35 }) 658 } 659} 660``` 661 662 663### 示例6（设置自定义样式按钮） 664该示例实现了自定义样式的功能，自定义样式实现了一个圆圈替换原本的按钮样式。如果按压，圆圈将变成红色，标题会显示按压字样；如果没有按压，圆圈将变成黑色，标题会显示非按压字样。 665```ts 666class MyButtonStyle implements ContentModifier<ButtonConfiguration> { 667 x: number = 0; 668 y: number = 0; 669 selectedColor: Color = Color.Black; 670 671 constructor(x: number, y: number, colorType: Color) { 672 this.x = x; 673 this.y = y; 674 this.selectedColor = colorType; 675 } 676 677 applyContent(): WrappedBuilder<[ButtonConfiguration]> { 678 return wrapBuilder(buildButton1); 679 } 680} 681 682@Builder 683function buildButton1(config: ButtonConfiguration) { 684 Column({ space: 30 }) { 685 Text(config.enabled ? "enabled true" : "enabled false") 686 Text('圆圈状态' + (config.pressed ? "（ 按压 ）" : "（ 非按压 ）")) 687 Text('点击位置x坐标：' + (config.enabled ? (config.contentModifier as MyButtonStyle).x : "0")) 688 Text('点击位置y坐标：' + (config.enabled ? (config.contentModifier as MyButtonStyle).y : "0")) 689 Circle({ width: 50, height: 50 }) 690 .fill(config.pressed ? (config.contentModifier as MyButtonStyle).selectedColor : Color.Black) 691 .gesture( 692 TapGesture({ count: 1 }).onAction((event: GestureEvent) => { 693 config.triggerClick(event.fingerList[0].localX, event.fingerList[0].localY) 694 })).opacity(config.enabled ? 1 : 0.1) 695 } 696} 697 698@Entry 699@Component 700struct ButtonExample { 701 @State buttonEnabled: boolean = true; 702 @State positionX: number = 0; 703 @State positionY: number = 0; 704 @State state: boolean[] = [true, false]; 705 @State index: number = 0; 706 707 build() { 708 Column() { 709 Button('OK') 710 .contentModifier(new MyButtonStyle(this.positionX, this.positionY, Color.Red)) 711 .onClick((event) => { 712 console.info('change' + JSON.stringify(event)); 713 this.positionX = event.displayX; 714 this.positionY = event.displayY; 715 }).enabled(this.buttonEnabled) 716 Row() { 717 Toggle({ type: ToggleType.Switch, isOn: true }).onChange((value: boolean) => { 718 if (value) { 719 this.buttonEnabled = true; 720 } else { 721 this.buttonEnabled = false; 722 } 723 }).margin({ left: -80 }) 724 } 725 }.height('100%').width('100%').justifyContent(FlexAlign.Center) 726 } 727} 728``` 729 730 731### 示例7（设置圆角矩形按钮） 732该示例通过配置ButtonType.ROUNDED_RECTANGLE创建圆角矩形按钮。 733```ts 734@Entry 735@Component 736struct ButtonExample { 737 build() { 738 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) { 739 Text('Rounded rectangle button with rounded corners by default.').fontSize(9).fontColor(0xCCCCCC) 740 Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { 741 Button('Rounded rectangle') 742 .type(ButtonType.ROUNDED_RECTANGLE) 743 .backgroundColor(0x317aff) 744 .controlSize(ControlSize.NORMAL) 745 .width(180) 746 } 747 Text('Rounded rectangle button configured with a borderRadius of 5.').fontSize(9).fontColor(0xCCCCCC) 748 Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { 749 Button('Rounded rectangle') 750 .type(ButtonType.ROUNDED_RECTANGLE) 751 .backgroundColor(0x317aff) 752 .controlSize(ControlSize.NORMAL) 753 .width(180) 754 .borderRadius(5) 755 } 756 Text('Rounded rectangle button configured extra long text.').fontSize(9).fontColor(0xCCCCCC) 757 Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { 758 Button('Rounded rectangle Rounded rectangle Rounded rectangle Rounded rectangle') 759 .type(ButtonType.ROUNDED_RECTANGLE) 760 .backgroundColor(0x317aff) 761 .width(180) 762 .labelStyle({overflow:TextOverflow.Ellipsis, maxLines:3, minFontSize: 0}) 763 } 764 }.height(400).padding({ left: 35, right: 35, top: 35 }) 765 } 766} 767``` 768
