1# Button 2 3按钮组件，可快速创建不同样式的按钮。 4 5> **说明：** 6> 7> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9 10## 子组件 11 12可以包含单个子组件。 13 14 15## 接口 16 17**方法1：** Button(options?: {type?: ButtonType, stateEffect?: boolean}) 18 19从API version 9开始，该接口支持在ArkTS卡片中使用。 20 21**参数：** 22 23| 参数名 | 参数类型 | 必填 | 参数描述 | 24| ----------- | ---------- | ------| --------------------------------- | 25| type | ButtonType | 否 | 描述按钮显示样式。<br/>默认值：ButtonType.Capsule | 26| stateEffect | boolean | 否 | 按钮按下时是否开启按压态显示效果，当设置为false时，按压效果关闭。<br/>默认值：true<br/>**说明：** <br/>当开启按压态显示效果，开发者设置状态样式时，会基于状态样式设置完成后的背景色再进行颜色叠加。 | 27 28 29**方法2：** Button(label?: ResourceStr, options?: { type?: ButtonType, stateEffect?: boolean }) 30 31 使用文本内容创建相应的按钮组件，此时Button无法包含子组件。 32 33从API version 9开始，该接口支持在ArkTS卡片中使用。 34 35**参数：** 36 37| 参数名 | 参数类型 | 必填 | 参数描述 | 38| ------- | ----------------------------------- | ---- | ------------- | 39| label | [ResourceStr](ts-types.md#resourcestr) | 否 | 按钮文本内容。 | 40| options | { type?: ButtonType, stateEffect?: boolean } | 否 | 见方法1参数说明。 | 41 42## 属性 43 44除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： 45 46| 名称 | 参数类型 | 描述 | 47| ----------- | ----------- | --------------------------------- | 48| type | ButtonType | 设置Button样式。<br/>默认值：ButtonType.Capsule<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 | 49| stateEffect | boolean | 按钮按下时是否开启按压态显示效果，当设置为false时，按压效果关闭。<br/>默认值：true<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 | 50 51## ButtonType枚举说明 52 53从API version 9开始，该接口支持在ArkTS卡片中使用。 54 55| 名称 | 描述 | 56| ------- | ------------------ | 57| Capsule | 胶囊型按钮（圆角默认为高度的一半）。 | 58| Circle | 圆形按钮。 | 59| Normal | 普通按钮（默认不带圆角）。 | 60 61> **说明：** 62> - 按钮圆角通过[通用属性borderRadius](ts-universal-attributes-border.md)设置（不支持通过border接口设置圆角），且只支持设置参数为[Length](ts-types.md#length)的圆角。 63> - 当按钮类型为Capsule时，borderRadius设置不生效，按钮圆角始终为宽、高中较小值的一半。 64> - 当按钮类型为Circle时，borderRadius即为按钮半径，若未设置borderRadius按钮半径则为宽、高中较小值的一半。 65> - 按钮文本通过[通用文本样式](ts-universal-attributes-text-style.md)进行设置。 66> - 设置[颜色渐变](ts-universal-attributes-gradient-color.md)需先设置[backgroundColor](ts-universal-attributes-background.md)为透明色。 67 68 69支持[通用事件](ts-universal-events-click.md)。 70## 示例 71 72```ts 73// xxx.ets 74@Entry 75@Component 76struct ButtonExample { 77 build() { 78 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) { 79 Text('Normal button').fontSize(9).fontColor(0xCCCCCC) 80 Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { 81 Button('OK', { type: ButtonType.Normal, stateEffect: true }).borderRadius(8).backgroundColor(0x317aff).width(90) 82 Button({ type: ButtonType.Normal, stateEffect: true }) { 83 Row() { 84 LoadingProgress().width(20).height(20).margin({ left: 12 }).color(0xFFFFFF) 85 Text('loading').fontSize(12).fontColor(0xffffff).margin({ left: 5, right: 12 }) 86 }.alignItems(VerticalAlign.Center) 87 }.borderRadius(8).backgroundColor(0x317aff).width(90).height(40) 88 89 Button('Disable', { type: ButtonType.Normal, stateEffect: false }).opacity(0.4) 90 .borderRadius(8).backgroundColor(0x317aff).width(90) 91 } 92 93 Text('Capsule button').fontSize(9).fontColor(0xCCCCCC) 94 Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { 95 Button('OK', { type: ButtonType.Capsule, stateEffect: true }).backgroundColor(0x317aff).width(90) 96 Button({ type: ButtonType.Capsule, stateEffect: true }) { 97 Row() { 98 LoadingProgress().width(20).height(20).margin({ left: 12 }).color(0xFFFFFF) 99 Text('loading').fontSize(12).fontColor(0xffffff).margin({ left: 5, right: 12 }) 100 }.alignItems(VerticalAlign.Center).width(90).height(40) 101 }.backgroundColor(0x317aff) 102 103 Button('Disable', { type: ButtonType.Capsule, stateEffect: false }).opacity(0.4) 104 .backgroundColor(0x317aff).width(90) 105 } 106 107 Text('Circle button').fontSize(9).fontColor(0xCCCCCC) 108 Flex({ alignItems: ItemAlign.Center, wrap: FlexWrap.Wrap }) { 109 Button({ type: ButtonType.Circle, stateEffect: true }) { 110 LoadingProgress().width(20).height(20).color(0xFFFFFF) 111 }.width(55).height(55).backgroundColor(0x317aff) 112 113 Button({ type: ButtonType.Circle, stateEffect: true }) { 114 LoadingProgress().width(20).height(20).color(0xFFFFFF) 115 }.width(55).height(55).margin({ left: 20 }).backgroundColor(0xF55A42) 116 } 117 }.height(400).padding({ left: 35, right: 35, top: 35 }) 118 } 119} 120``` 121 122
