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