1# Button 2 3提供按钮组件。 4 5> **说明：** 6> 7> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9## 权限列表 10 11无 12 13 14## 子组件 15 16可以包含单个子组件。 17 18 19## 接口 20 21**方法1：** Button(options?: {type?: ButtonType, stateEffect?: boolean}) 22 23表1 options参数说明 24 25| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 26| ----------- | ---------- | ---- | ------- | --------------------------------- | 27| type | ButtonType | 否 | Capsule | 描述按钮风格。 | 28| stateEffect | boolean | 否 | true | 按钮按下时是否开启切换效果，当状态置为false时，点击效果关闭。 | 29 30**方法2：** Button(label?: ResourceStr, options?: { type?: ButtonType, stateEffect?: boolean }) 31 32使用文本内容创建相应的按钮组件，此时Button无法包含子组件。 33 34表2 value参数说明 35 36| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 37| ------- | ------ | ---- | ---- | ------------- | 38| label | [ResourceStr](ts-types.md#resourcestr8) | 否 | - | 按钮文本内容。 | 39| options | Object | 否 | - | 见options参数说明。 | 40 41## 属性 42 43| 名称 | 参数类型 | 默认值 | 描述 | 44| ----------- | ---------- | ------- | --------------------------------- | 45| type | ButtonType | ButtonType.Capsule | 设置Button样式。 | 46| stateEffect | boolean | true | 状态切换时是否开启切换效果，当状态置为false时，点击效果关闭。 | 47 48## ButtonType枚举说明 49 50| 名称 | 描述 | 51| ------- | ------------------ | 52| Capsule | 胶囊型按钮（圆角默认为高度的一半）。 | 53| Circle | 圆形按钮。 | 54| Normal | 普通按钮（默认不带圆角）。 | 55 56> **说明：** 57> - 按钮圆角通过[通用属性borderRadius设置](ts-universal-attributes-border.md)（不支持通过border接口设置圆角）。 58> - 当按钮类型为Capsule时，borderRadius设置不生效，按钮圆角始终为高度的一半。 59> - 当按钮类型为Circle时，borderRadius即为按钮半径，若未设置borderRadius按钮半径则为宽、高中较小值的一半。 60> - 按钮文本通过[通用文本样式](ts-universal-attributes-text-style.md)进行设置。 61 62 63## 示例 64 65```ts 66// xxx.ets 67@Entry 68@Component 69struct ButtonExample { 70 build() { 71 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) { 72 Text('Common button').fontSize(9).fontColor(0xCCCCCC) 73 Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { 74 Button('Ok', { type: ButtonType.Normal, stateEffect: true }).borderRadius(8).backgroundColor(0x317aff).width(90) 75 Button({ type: ButtonType.Normal, stateEffect: true }) { 76 Row() { 77 Image($r('app.media.loading')).width(20).height(20).margin({ left: 12 }) 78 Text('loading').fontSize(12).fontColor(0xffffff).margin({ left: 5, right: 12 }) 79 }.alignItems(VerticalAlign.Center) 80 }.borderRadius(8).backgroundColor(0x317aff).width(90) 81 Button('Disable', { type: ButtonType.Normal, stateEffect: false }).opacity(0.5) 82 .borderRadius(8).backgroundColor(0x317aff).width(90) 83 } 84 85 Text('Capsule button').fontSize(9).fontColor(0xCCCCCC) 86 Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { 87 Button('Ok', { type: ButtonType.Capsule, stateEffect: true }).backgroundColor(0x317aff).width(90) 88 Button({ type: ButtonType.Capsule, stateEffect: true }) { 89 Row() { 90 Image($r('app.media.loading')).width(20).height(20).margin({ left: 12 }) 91 Text('loading').fontSize(12).fontColor(0xffffff).margin({ left: 5, right: 12 }) 92 }.alignItems(VerticalAlign.Center).width(90) 93 }.backgroundColor(0x317aff) 94 .onClick((event: ClickEvent) => { 95 AlertDialog.show({ message: 'The login is successful' }) 96 }) 97 Button('Disable', { type: ButtonType.Capsule, stateEffect: false }).opacity(0.5) 98 .backgroundColor(0x317aff).width(90) 99 } 100 101 Text('Circle button').fontSize(9).fontColor(0xCCCCCC) 102 Flex({ alignItems: ItemAlign.Center, wrap: FlexWrap.Wrap }) { 103 Button({ type: ButtonType.Circle, stateEffect: true }) { 104 Image($r('app.media.ic_public_app_filled')).width(20).height(20) 105 }.width(55).height(55).backgroundColor(0x317aff) 106 Button({ type: ButtonType.Circle, stateEffect: true }) { 107 Image($r('app.media.ic_public_delete_filled')).width(30).height(30) 108 }.width(55).height(55).margin({ left: 20 }).backgroundColor(0xF55A42) 109 } 110 }.height(400).padding({ left: 35, right: 35, top: 35 }) 111 } 112} 113``` 114 115 116
