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### 示例1 73 74```ts 75// xxx.ets 76@Entry 77@Component 78struct ButtonExample { 79 build() { 80 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) { 81 Text('Normal button').fontSize(9).fontColor(0xCCCCCC) 82 Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { 83 Button('OK', { type: ButtonType.Normal, stateEffect: true }) 84 .borderRadius(8) 85 .backgroundColor(0x317aff) 86 .width(90) 87 .onClick(() => { 88 console.log('ButtonType.Normal') 89 }) 90 Button({ type: ButtonType.Normal, stateEffect: true }) { 91 Row() { 92 LoadingProgress().width(20).height(20).margin({ left: 12 }).color(0xFFFFFF) 93 Text('loading').fontSize(12).fontColor(0xffffff).margin({ left: 5, right: 12 }) 94 }.alignItems(VerticalAlign.Center) 95 }.borderRadius(8).backgroundColor(0x317aff).width(90).height(40) 96 97 Button('Disable', { type: ButtonType.Normal, stateEffect: false }).opacity(0.4) 98 .borderRadius(8).backgroundColor(0x317aff).width(90) 99 } 100 101 Text('Capsule button').fontSize(9).fontColor(0xCCCCCC) 102 Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { 103 Button('OK', { type: ButtonType.Capsule, stateEffect: true }).backgroundColor(0x317aff).width(90) 104 Button({ type: ButtonType.Capsule, stateEffect: true }) { 105 Row() { 106 LoadingProgress().width(20).height(20).margin({ left: 12 }).color(0xFFFFFF) 107 Text('loading').fontSize(12).fontColor(0xffffff).margin({ left: 5, right: 12 }) 108 }.alignItems(VerticalAlign.Center).width(90).height(40) 109 }.backgroundColor(0x317aff) 110 111 Button('Disable', { type: ButtonType.Capsule, stateEffect: false }).opacity(0.4) 112 .backgroundColor(0x317aff).width(90) 113 } 114 115 Text('Circle button').fontSize(9).fontColor(0xCCCCCC) 116 Flex({ alignItems: ItemAlign.Center, wrap: FlexWrap.Wrap }) { 117 Button({ type: ButtonType.Circle, stateEffect: true }) { 118 LoadingProgress().width(20).height(20).color(0xFFFFFF) 119 }.width(55).height(55).backgroundColor(0x317aff) 120 121 Button({ type: ButtonType.Circle, stateEffect: true }) { 122 LoadingProgress().width(20).height(20).color(0xFFFFFF) 123 }.width(55).height(55).margin({ left: 20 }).backgroundColor(0xF55A42) 124 } 125 }.height(400).padding({ left: 35, right: 35, top: 35 }) 126 } 127} 128``` 129 130 131 132### 示例2 133 134```ts 135// xxx.ets 136@Entry 137@Component 138struct SwipeGestureExample { 139 @State count: number = 0 140 141 build() { 142 Column() { 143 Text(`${this.count}`) 144 .fontSize(30) 145 .onClick(() => { 146 this.count++ 147 }) 148 if (this.count <= 0) { 149 Button('count is negative').fontSize(30).height(50) 150 } else if (this.count % 2 === 0) { 151 Button('count is even').fontSize(30).height(50) 152 } else { 153 Button('count is odd').fontSize(30).height(50) 154 } 155 }.height('100%').width('100%').justifyContent(FlexAlign.Center) 156 } 157} 158``` 159 160
