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