1# ArcButton 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @liyi0309--> 5<!--Designer: @liyi0309--> 6<!--Tester: @lxl007--> 7<!--Adviser: @HelloCrease--> 8 9弧形按钮组件用于圆形屏幕的穿戴设备。提供强调、普通、警告等样式按钮。 10 11> **说明：** 12> 13> 该组件从API version 18开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 14 15## 导入模块 16 17```ts 18import { 19 ArcButton, 20 ArcButtonOptions, 21 ArcButtonStatus, 22 ArcButtonStyleMode, 23 ArcButtonPosition, 24} from '@kit.ArkUI'; 25``` 26 27## 子组件 28 29无 30 31## 属性 32不支持[通用属性](ts-component-general-attributes.md) 33 34## 事件 35通用事件支持[点击事件](ts-universal-events-click.md)和[触摸事件](ts-universal-events-touch.md)。 36 37## ArcButton 38 39ArcButton({ options: ArcButtonOptions }) 40 41创建ArcButton实例，入参是弧形按钮配置选项。 42 43**装饰器类型：** @Component 44 45**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 46 47**系统能力：** SystemCapability.ArkUI.ArkUI.Circle 48 49**参数**： 50 51| 名称 | 类型 | 必填 | 装饰器类型 | 说明 | 52| ------- | ---------------- | ---- | ----------- | ------------------------- | 53| options | [ArcButtonOptions](#arcbuttonoptions) | 是 | @Require | 定义ArcButton组件的文本、背景色、阴影等参数。 | 54 55## ArcButtonOptions 56 57定义ArcButton的默认样式或自定义样式参数。 58 59**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 60 61**系统能力：** SystemCapability.ArkUI.ArkUI.Circle 62 63### 属性 64 65| 名称 | 类型 | 只读 | 可选 | 说明 | 66| ---------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | ------------------------------------------------------------ | 67| position | [ArcButtonPosition](#arcbuttonposition) | 否 | 否 | 上下弧形按钮类型属性。<br/>默认值：ArcButtonPosition.BOTTOM_EDGE | 68| styleMode | [ArcButtonStyleMode](#arcbuttonstylemode) | 否 | 否 | 弧形按钮样式模式。<br>默认值：ArcButtonStyleMode.EMPHASIZED_LIGHT | 69| status | [ArcButtonStatus](#arcbuttonstatus) | 否 | 否 | 弧形按钮状态。<br/>默认值：ArcButtonStatus.NORMAL | 70| label | [ResourceStr](ts-types.md#resourcestr) | 否 | 否 | 弧形按钮显示文本。 | 71| backgroundBlurStyle | [BlurStyle](ts-universal-attributes-background.md#blurstyle9) | 否 | 否 | 弧形按钮背景模糊能力。<br/>默认值：BlurStyle.NONE | 72| backgroundColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | 否 | 否 | 弧形按钮背景颜色。<br/>ArcButtonStyleMode需要设置为CUSTOM。<br/>默认值：Color.Black | 73| shadowColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | 否 | 否 | 弧形按钮阴影颜色。<br/>默认值：Color.Black | 74| shadowEnabled | boolean | 否 | 否 | 弧形按钮阴影开关。<br/>默认值：false<br/>值为true时，显示阴影。值为false时，不显示阴影。 | 75| fontSize | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | 否 | 否 | 弧形按钮文本大小。<br/>默认值：19fp | 76| fontColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | 否 | 否 | 弧形按钮文本颜色。<br/>ArcButtonStyleMode需要设置为CUSTOM。<br/>默认值：Color.White | 77| pressedFontColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | 否 | 否 | 弧形按钮按下文本颜色。<br/>ArcButtonStyleMode需要设置为CUSTOM。<br/>默认值：Color.White | 78| fontStyle | [FontStyle](ts-appendix-enums.md#fontstyle) | 否 | 否 | 弧形按钮文本样式。<br/>默认值：FontStyle.Normal | 79| fontFamily | string \| [Resource](ts-types.md#resource) | 否 | 否 | 弧形按钮字体名。 | 80| fontMargin | [LocalizedMargin](ts-types.md#localizedmargin12) | 否 | 否 | 弧形按钮文本边距。<br/>默认值：{start:24vp, top: 10vp,end: 24vp, bottom:16vp } | 81|onTouch | [Callback](ts-types.md#voidcallback12)< [TouchEvent](ts-universal-events-touch.md#touchevent对象说明)> | 否 | 是 | 弧形按钮手指触摸动作触发该回调。 | 82|onClick | [Callback](ts-types.md#voidcallback12)<[ClickEvent](ts-universal-events-click.md#clickevent对象说明) > | 否 | 是 | 弧形按钮点击动作触发该回调。 | 83 84### constructor 85 86constructor(options: CommonArcButtonOptions) 87 88弧形按钮的构造器。 89 90**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 91 92**系统能力：** SystemCapability.ArkUI.ArkUI.Circle 93 94**参数：** 95 96| 参数名| 类型 | 必填 | 说明 | 97| ------- | ------------------------------------------------- | ---- | --------------------------------------------- | 98| options | [CommonArcButtonOptions](#commonarcbuttonoptions) | 是 | 定义ArcButton组件的文本、背景色、阴影等参数。 | 99 100## CommonArcButtonOptions 101 102ArcButton的默认样式或自定义样式参数。 103 104**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 105 106**系统能力：** SystemCapability.ArkUI.ArkUI.Circle 107 108| 名称 | 类型 | 只读 | 可选 | 说明 | 109| ------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | ------------------------------------------------------------ | 110| position | [ArcButtonPosition](#arcbuttonposition) |否 |是 | 上下弧形按钮类型属性。<br/>默认值：ArcButtonPosition.BOTTOM_EDGE | 111| styleMode | [ArcButtonStyleMode](#arcbuttonstylemode) | 否 | 是 | 弧形按钮样式模式。<br>默认值：ArcButtonStyleMode.EMPHASIZED_LIGHT | 112| status | [ArcButtonStatus](#arcbuttonstatus) |否 |是 | 弧形按钮状态。<br/>默认值：ArcButtonStatus.NORMAL | 113| label | [ResourceStr](ts-types.md#resourcestr) |否 |是 | 弧形按钮显示文本。 | 114| backgroundBlurStyle | [BlurStyle](ts-universal-attributes-background.md#blurstyle9) | 否 | 是 | 弧形按钮背景模糊能力。<br/>默认值：BlurStyle.NONE | 115| backgroundColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | 否 | 是 | 弧形按钮背景颜色。<br/>ArcButtonStyleMode需要设置为CUSTOM。<br/>默认值：Color.Black | 116| shadowColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | 否 | 是 | 弧形按钮阴影颜色。<br/>默认值：Color.Black | 117| shadowEnabled | boolean | 否 | 是 | 弧形按钮阴影开关。<br/>默认值：false<br/>值为true时，显示阴影。值为false时，不显示阴影。 | 118| fontSize | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | 否 | 是 | 弧形按钮文本大小。<br/>默认值：19fp | 119| fontColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) |否 |是 | 弧形按钮文本颜色。<br/>ArcButtonStyleMode需要设置为CUSTOM。<br/>默认值：Color.White | 120| pressedFontColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | 否 | 是 | 弧形按钮按下文本颜色。<br/>ArcButtonStyleMode需要设置为CUSTOM。<br/>默认值：Color.White | 121| fontStyle | [FontStyle](ts-appendix-enums.md#fontstyle) | 否 | 是 | 弧形按钮文本样式。<br/>默认值：FontStyle.Normal | 122| fontFamily | string \| [Resource](ts-types.md#resource) |否 |是 | 弧形按钮字体名。 | 123| fontMargin | [LocalizedMargin](ts-types.md#localizedmargin12) | 否 | 是 | 弧形按钮文本边距。<br/>默认值：{start:24vp, top: 10vp,end: 24vp, bottom:16vp } | 124| onTouch | [Callback](ts-types.md#voidcallback12)< [TouchEvent](ts-universal-events-touch.md#touchevent对象说明)> | 否 | 是 | 弧形按钮手指触摸动作触发该回调。 | 125| onClick | [Callback](ts-types.md#voidcallback12)<[ClickEvent](ts-universal-events-click.md#clickevent对象说明) > | 否 | 是 | 弧形按钮点击动作触发该回调。 | 126 127## ArcButtonPosition 128 129定义ArcButton可设置的弧形按钮的类型。 130 131**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 132 133**系统能力：** SystemCapability.ArkUI.ArkUI.Circle 134 135| 名称 | 值 | 说明 | 136| ----------- | ---- | -------------------------------- | 137| TOP_EDGE | 0 | 上弧形按钮，位于圆形屏幕上方。 | 138| BOTTOM_EDGE | 1 | 底部弧形按钮，位于圆形屏幕底部。 | 139 140 141## ArcButtonStyleMode 142 143定义ArcButton可设置弧形按钮样式模式。 144 145**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 146 147**系统能力：** SystemCapability.ArkUI.ArkUI.Circle 148 149| 名称 | 值 | 说明 | 150| ---------------- | ---- | ---------------- | 151| EMPHASIZED_LIGHT | 0 | 强调状态，亮色。 | 152| EMPHASIZED_DARK | 1 | 强调状态，暗色。 | 153| NORMAL_LIGHT | 2 | 正常状态，亮色。 | 154| NORMAL_DARK | 3 | 正常状态，暗色。 | 155| CUSTOM | 4 | 自定义按钮颜色和字体颜色。 | 156 157 158## ArcButtonStatus 159 160定义ArcButton可设置的弧形按钮状态。 161 162**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 163 164**系统能力：** SystemCapability.ArkUI.ArkUI.Circle 165 166| 名称 | 值 | 说明 | 167| -------- | ---- | ---------- | 168| NORMAL | 0 | 正常状态。 | 169| PRESSED | 1 | 按压状态。 | 170| DISABLED | 2 | 禁用状态。 | 171 172 173## 示例 174 175从API version18开始，该示例展示了ArcButton的基本用法。 176 177topOptions定义了上弧形按钮，按钮文本为ButtonTop，字体大小为15fp，按钮状态为正常状态，按钮样式为亮色强调，启用阴影。 178 179bottomOptions定义了底部弧形按钮，按钮文本为ButtonBottom，字体大小为15fp，按钮样式为亮色强调，启用阴影，设置了按钮的点击事件。 180 181运行该示例需要Wearable设备的支持。在src/main目录下的工程配置文件[module.json5](../../../quick-start/module-configuration-file.md)中[deviceTypes标签](../../../quick-start/module-configuration-file.md#devicetypes标签)内配置wearable。 182 183```json 184// module.json5 185{ 186 "module": { 187 // ... 188 "deviceTypes": [ 189 "wearable", 190 "phone" 191 ] 192 // ... 193 } 194} 195``` 196 197```ts 198// xxx.ets 199import { 200 LengthMetrics, 201 LengthUnit, 202 ArcButton, 203 ArcButtonOptions, 204 ArcButtonStatus, 205 ArcButtonStyleMode, 206 ArcButtonPosition, 207} from '@kit.ArkUI'; 208 209@Entry 210@ComponentV2 211struct Index { 212 @Local topOptions: ArcButtonOptions = new ArcButtonOptions({}); 213 @Local bottomOptions: ArcButtonOptions = new ArcButtonOptions({}); 214 215 aboutToAppear() { 216 this.topOptions = new ArcButtonOptions({ 217 label: 'ButtonTop', 218 status: ArcButtonStatus.NORMAL, 219 position: ArcButtonPosition.TOP_EDGE, 220 styleMode: ArcButtonStyleMode.EMPHASIZED_LIGHT, 221 fontSize: new LengthMetrics(15, LengthUnit.FP), 222 shadowEnabled: true 223 }) 224 225 this.bottomOptions = new ArcButtonOptions({ 226 label: 'ButtonBottom', 227 styleMode: ArcButtonStyleMode.EMPHASIZED_LIGHT, 228 fontSize: new LengthMetrics(15, LengthUnit.FP), 229 shadowEnabled: true, 230 onClick: () => { 231 console.info('click from ArcButton.'); 232 } 233 }) 234 } 235 236 build() { 237 Stack() { 238 Stack() { 239 Circle({ width: 233, height: 233 }) 240 .strokeWidth(0.1) 241 .fill(Color.White) 242 243 Column() { 244 ArcButton({ options: this.topOptions }) 245 Blank() 246 ArcButton({ options: this.bottomOptions }) 247 248 }.width('100%') 249 .height('100%') 250 }.width(233) 251 .height(233) 252 }.width('100%') 253 .height('100%') 254 .alignContent(Alignment.Center) 255 .backgroundColor(Color.Gray) 256 } 257} 258 259``` 260 261
