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