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