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**系统能力：** SystemCapability.ArkUI.ArkUI.Full 26 27**参数：** 28 29| 参数名 | 类型 | 必填 | 描述 | 30| ------- | --------------------------------------- | ---- | -------------------- | 31| options | [ButtonOptions](#buttonoptions对象说明) | 是 | 配置按钮的显示样式。 | 32 33### Button 34 35Button(label: ResourceStr, options?: ButtonOptions) 36 37使用文本内容创建相应的按钮组件，此时Button无法包含子组件。 38 39**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 40 41**系统能力：** SystemCapability.ArkUI.ArkUI.Full 42 43**参数：** 44 45| 参数名 | 类型 | 必填 | 描述 | 46| ------- | ----------------------------------- | ---- | ------------- | 47| label | [ResourceStr](ts-types.md#resourcestr) | 否 | 按钮文本内容。 | 48| options | [ButtonOptions](#buttonoptions对象说明) | 否 | 配置按钮的显示样式。 | 49 50## ButtonOptions对象说明 51 52| 名称 | 类型 | 必填 | 说明 | 53| ----------- | --------------------------------- | ---- | ------------------------------------------------------------ | 54| type | [ButtonType](#buttontype枚举说明) | 否 | 描述按钮显示样式。<br/>默认值：ButtonType.Capsule | 55| stateEffect | boolean | 否 | 按钮按下时是否开启按压态显示效果，当设置为false时，按压效果关闭。<br/>默认值：true<br/>**说明：** <br/>当开启按压态显示效果，开发者设置状态样式时，会基于状态样式设置完成后的背景色再进行颜色叠加。 | 56 57## 属性 58 59除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： 60 61| 名称 | 参数类型 | 描述 | 62| ----------- | ----------- | --------------------------------- | 63| type | [ButtonType](#buttontype枚举说明) | 设置Button样式。<br/>默认值：ButtonType.Capsule<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 | 64| fontSize | [Length](ts-types.md#length) | 设置文本显示字号。<br/>默认值：'16fp' | 65| fontColor | [ResourceColor](ts-types.md#resourcecolor) | 设置文本显示颜色。<br/>默认值：'\#ffffff' | 66| fontWeight | [FontWeight](ts-appendix-enums.md#fontweight) \| number \| string | 设置文本的字体粗细，number类型取值[100, 900]，取值间隔为100，取值越大，字体越粗。<br>默认值：400 \| FontWeight.Normal | 67| fontStyle | [FontStyle](ts-appendix-enums.md#fontstyle) | 设置文本的字体样式。<br>默认值：FontStyle.Normal。 | 68| stateEffect | boolean | 按钮按下时是否开启按压态显示效果，当设置为false时，按压效果关闭。<br/>默认值：true<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 | 69| labelStyle<sup>10+</sup> | [LabelStyle](#labelstyle10对象说明) | 设置Button组件label文本和字体的样式。 | 70 71## ButtonType枚举说明 72 73从API version 9开始，该接口支持在ArkTS卡片中使用。 74 75| 名称 | 描述 | 76| ------- | ------------------ | 77| Capsule | 胶囊型按钮（圆角默认为高度的一半）。 | 78| Circle | 圆形按钮。 | 79| Normal | 普通按钮（默认不带圆角）。 | 80 81> **说明：** 82> - 按钮圆角通过[通用属性borderRadius](ts-universal-attributes-border.md)设置（不支持通过border接口设置圆角），且只支持设置参数为[Length](ts-types.md#length)的圆角。 83> - 当按钮类型为Capsule时，borderRadius设置不生效，按钮圆角始终为宽、高中较小值的一半。 84> - 当按钮类型为Circle时，若同时设置了宽和高，则borderRadius不生效，且按钮半径为宽高中较小值的一半；若只设置宽、高中的一个，则borderRadius不生效，且按钮半径为所设宽或所设高值的一半；若不设置宽高，则borderRadius为按钮半径；若borderRadius的值为负，则borderRadius的值按照0处理。 85> - 按钮文本通过[通用文本样式](ts-universal-attributes-text-style.md)进行设置。 86> - 设置[颜色渐变](ts-universal-attributes-gradient-color.md)需先设置[backgroundColor](ts-universal-attributes-background.md)为透明色。 87 88## LabelStyle<sup>10+</sup>对象说明 89 90| 名称 | 参数类型 | 必填 | 描述 | 91| -------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 92| overflow | [TextOverflow](ts-appendix-enums.md#textoverflow) | 否 | 设置Label文本超长时的显示方式。文本截断是按字截断。例如，英文以单词为最小单位进行截断，若需要以字母为单位进行截断，可在字母间添加零宽空格。<br>默认值：TextOverflow.Ellipsis | 93| maxLines | number | 否 | 设置Label文本的最大行数。默认情况下，文本是自动折行的，如果指定此参数，则文本最多不会超过指定的行。如果有多余的文本，可以通过overflow来指定截断方式。<br>默认值：1 | 94| minFontSize | number \| [ResourceStr](ts-types.md#resourcestr) | 否 | 设置Label文本最小显示字号。需配合maxFontSize以及maxLines或布局大小限制使用。 | 95| maxFontSize | number \| [ResourceStr](ts-types.md#resourcestr) | 否 | 设置Label文本最大显示字号。需配合minFontSize以及maxLines或布局大小限制使用。 | 96| heightAdaptivePolicy | [TextHeightAdaptivePolicy](ts-appendix-enums.md#textheightadaptivepolicy10) | 否 | 设置Label文本自适应高度的方式。 | 97| font | [Font](ts-types.md#font) | 否 | 设置Label文本字体样式。<br>默认值：默认值参考[Font](ts-types.md#font)。 | 98## 事件 99 100支持[通用事件](ts-universal-events-click.md)。 101## 示例 102 103### 示例1 104 105```ts 106// xxx.ets 107@Entry 108@Component 109struct ButtonExample { 110 build() { 111 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) { 112 Text('Normal button').fontSize(9).fontColor(0xCCCCCC) 113 Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { 114 Button('OK', { type: ButtonType.Normal, stateEffect: true }) 115 .borderRadius(8) 116 .backgroundColor(0x317aff) 117 .width(90) 118 .onClick(() => { 119 console.log('ButtonType.Normal') 120 }) 121 Button({ type: ButtonType.Normal, stateEffect: true }) { 122 Row() { 123 LoadingProgress().width(20).height(20).margin({ left: 12 }).color(0xFFFFFF) 124 Text('loading').fontSize(12).fontColor(0xffffff).margin({ left: 5, right: 12 }) 125 }.alignItems(VerticalAlign.Center) 126 }.borderRadius(8).backgroundColor(0x317aff).width(90).height(40) 127 128 Button('Disable', { type: ButtonType.Normal, stateEffect: false }).opacity(0.4) 129 .borderRadius(8).backgroundColor(0x317aff).width(90) 130 } 131 132 Text('Capsule button').fontSize(9).fontColor(0xCCCCCC) 133 Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { 134 Button('OK', { type: ButtonType.Capsule, stateEffect: true }).backgroundColor(0x317aff).width(90) 135 Button({ type: ButtonType.Capsule, stateEffect: true }) { 136 Row() { 137 LoadingProgress().width(20).height(20).margin({ left: 12 }).color(0xFFFFFF) 138 Text('loading').fontSize(12).fontColor(0xffffff).margin({ left: 5, right: 12 }) 139 }.alignItems(VerticalAlign.Center).width(90).height(40) 140 }.backgroundColor(0x317aff) 141 142 Button('Disable', { type: ButtonType.Capsule, stateEffect: false }).opacity(0.4) 143 .backgroundColor(0x317aff).width(90) 144 } 145 146 Text('Circle button').fontSize(9).fontColor(0xCCCCCC) 147 Flex({ alignItems: ItemAlign.Center, wrap: FlexWrap.Wrap }) { 148 Button({ type: ButtonType.Circle, stateEffect: true }) { 149 LoadingProgress().width(20).height(20).color(0xFFFFFF) 150 }.width(55).height(55).backgroundColor(0x317aff) 151 152 Button({ type: ButtonType.Circle, stateEffect: true }) { 153 LoadingProgress().width(20).height(20).color(0xFFFFFF) 154 }.width(55).height(55).margin({ left: 20 }).backgroundColor(0xF55A42) 155 } 156 }.height(400).padding({ left: 35, right: 35, top: 35 }) 157 } 158} 159``` 160 161 162 163### 示例2 164 165```ts 166// xxx.ets 167@Entry 168@Component 169struct SwipeGestureExample { 170 @State count: number = 0 171 172 build() { 173 Column() { 174 Text(`${this.count}`) 175 .fontSize(30) 176 .onClick(() => { 177 this.count++ 178 }) 179 if (this.count <= 0) { 180 Button('count is negative').fontSize(30).height(50) 181 } else if (this.count % 2 === 0) { 182 Button('count is even').fontSize(30).height(50) 183 } else { 184 Button('count is odd').fontSize(30).height(50) 185 } 186 }.height('100%').width('100%').justifyContent(FlexAlign.Center) 187 } 188} 189``` 190 191 192 193### 示例3 194 195```ts 196// xxx.ets 197@Entry 198@Component 199struct buttonTestDemo { 200 @State txt: string = 'overflowTextOverlengthTextOverflow.Clip'; 201 @State widthShortSize: number = 200; 202 203 build() { 204 Row() { 205 Column() { 206 Button(this.txt) 207 .width(this.widthShortSize) 208 .height(100) 209 .labelStyle({ overflow: TextOverflow.Clip, 210 maxLines: 1, 211 minFontSize: 20, 212 maxFontSize: 20, 213 font: { 214 size: 20, 215 weight: FontWeight.Bolder, 216 family: 'cursive', 217 style: FontStyle.Italic 218 } 219 }) 220 .fontSize(40) 221 } 222 .width('100%') 223 } 224 .height('100%') 225 } 226} 227``` 228 229
