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