弧形按钮 (ArcButton)(圆形屏幕推荐使用)
==========================

从API version 18开始支持ArcButton。ArcButton是弧形按钮组件，推荐用于圆形屏幕。为用户提供强调、普通、警告等样式按钮。具体用法请参考[ArcButton](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ohos-arkui-advanced-arcbutton)。

#### 创建按钮

ArcButton通过调用以下接口来创建。

ArcButton({
  options: new ArcButtonOptions({
    label: 'OK',
    position: ArcButtonPosition.TOP\_EDGE,
    styleMode: ArcButtonStyleMode.EMPHASIZED\_LIGHT,
  // ···
  })
})

其中，[label](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ohos-arkui-advanced-arcbutton#arcbuttonoptions)设置按钮文字，[position](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ohos-arkui-advanced-arcbutton#arcbuttonoptions)设置按钮类型，[styleMode](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ohos-arkui-advanced-arcbutton#arcbuttonoptions)设置按钮样式。

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/12/v3/5RFcb0l5TIOMJJEMwz5qPw/zh-cn_image_0000002633848578.png?HW-CC-KV=V1&HW-CC-Date=20260709T132302Z&HW-CC-Expire=86400&HW-CC-Sign=63B7854FA86E6B775A1E003BE894FD9D1DE4336B9BEF6937594FB4321D89FEC3)

#### 设置按钮类型

ArcButton有上弧形按钮和下弧形按钮两种类型。使用[position](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ohos-arkui-advanced-arcbutton#arcbuttonoptions)设置按钮类型。

*   下弧形按钮（默认类型）。
    
    通过将[position](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ohos-arkui-advanced-arcbutton#arcbuttonoptions)属性设置为ArcButtonPosition.BOTTOM\_EDGE，可以将按钮设置为下弧形按钮。
    
    ArcButton({
      options: new ArcButtonOptions({
        label: 'OK',
        position: ArcButtonPosition.BOTTOM\_EDGE,
        styleMode: ArcButtonStyleMode.EMPHASIZED\_LIGHT,
      // ···
      })
    
    })
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/95/v3/nXm0NlLLQhyHWf0OUO2leg/zh-cn_image_0000002634008482.png?HW-CC-KV=V1&HW-CC-Date=20260709T132302Z&HW-CC-Expire=86400&HW-CC-Sign=8A0899B11A34F9AF05F086322868836A9C4BDF25B69AD4F05FFBAD9CDD3075B2)
    
*   上弧形按钮。
    
    通过将[position](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ohos-arkui-advanced-arcbutton#arcbuttonoptions)属性设置为ArcButtonPosition.TOP\_EDGE，可以将按钮设置为上弧形按钮。
    
    ArcButton({
      options: new ArcButtonOptions({
        label: 'OK',
        position: ArcButtonPosition.TOP\_EDGE,
        styleMode: ArcButtonStyleMode.EMPHASIZED\_LIGHT,
      // ···
      })
    })
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/e5/v3/xwPNjf0fTVCBtVAOt--z2Q/zh-cn_image_0000002664207629.png?HW-CC-KV=V1&HW-CC-Date=20260709T132302Z&HW-CC-Expire=86400&HW-CC-Sign=8086A9468C172545F151BCF71C75367B6481EC70F3202285C7AE635954613610)
    

#### 自定义样式

*   设置背景色。
    
    使用[backgroundColor](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ohos-arkui-advanced-arcbutton#arcbuttonoptions)属性设置按钮的背景色。
    
    ArcButton({
      options: new ArcButtonOptions({
        label: 'OK',
        styleMode: ArcButtonStyleMode.CUSTOM,
        backgroundColor: ColorMetrics.resourceColor('#707070')
      })
    })
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/b3/v3/Kl1aawE9QVmx2bXG4SiA5g/zh-cn_image_0000002664327689.png?HW-CC-KV=V1&HW-CC-Date=20260709T132302Z&HW-CC-Expire=86400&HW-CC-Sign=2A450D8B41F840B49B96570DC72D50E29DCA20AA7ED47BB9B3FC2F8DF8FDB54D)
    
*   设置文本颜色。
    
    使用[fontColor](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ohos-arkui-advanced-arcbutton#arcbuttonoptions)属性设置按钮的文本颜色。
    
    ArcButton({
      options: new ArcButtonOptions({
        label: 'OK',
        styleMode: ArcButtonStyleMode.CUSTOM,
        backgroundColor: ColorMetrics.resourceColor('#E84026'),
        fontColor: ColorMetrics.resourceColor('#707070')
      })
    })
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/ef/v3/wzBY57etRsqEsD1Mb10nlA/zh-cn_image_0000002633848580.png?HW-CC-KV=V1&HW-CC-Date=20260709T132302Z&HW-CC-Expire=86400&HW-CC-Sign=6A5091C43687DEBE0441A69792A110160E050DA1EA013E625D8F1A2156BF9BFB)
    
*   设置阴影颜色。
    
    使用[shadowEnabled](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ohos-arkui-advanced-arcbutton#arcbuttonoptions)属性启用按钮阴影，并通过[shadowColor](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ohos-arkui-advanced-arcbutton#arcbuttonoptions)属性设置按钮的阴影颜色。
    
    ArcButton({
      options: new ArcButtonOptions({
        label: 'OK',
        shadowEnabled: true,
        shadowColor: ColorMetrics.resourceColor('#ffec1022')
      })
    })
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/f9/v3/9xkXfvZlQpyO1NawVaze4A/zh-cn_image_0000002634008484.png?HW-CC-KV=V1&HW-CC-Date=20260709T132302Z&HW-CC-Expire=86400&HW-CC-Sign=B509D2835DCC44C9495A97F352D68BB3A6937F2BAC72A93AA1ACC23854F14659)
    

#### 添加事件

*   绑定onClick事件来响应点击操作后的自定义行为。
    
    ArcButton({
      options: new ArcButtonOptions({
        label: 'OK',
      // ···
        onClick: () => {
          hilog.info(DOMAIN, TAG, 'ArcButton onClick');
        },
      })
    })
    
*   绑定onTouch事件来响应触摸操作后的自定义行为。
    
    ArcButton({
      options: new ArcButtonOptions({
        label: 'OK',
      // ···
        onTouch: (event: TouchEvent) => {
          hilog.info(DOMAIN, TAG, 'ArcButton onTouch');
        }
      })
    
    })
    

#### 场景示例

在亮度设置界面，进度条显示当前亮度为30%。点击重置后，亮度值将被重置为默认的50%。

运行该示例推荐在Wearable设备上以获得最佳显示效果，同时支持在其他设备上运行。若要在Wearable设备上运行，在src/main目录下的工程配置文件[module.json5](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/module-configuration-file)中[deviceTypes标签](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/module-configuration-file#devicetypes标签)内配置wearable。

"module": {
  // ...
  "deviceTypes": \[
    "default",
    "wearable"
  \],
  // ...
}

import { LengthMetrics, LengthUnit, ArcButton, ArcButtonOptions, ArcButtonStyleMode } from '@kit.ArkUI';

const BRIGHT\_NESS\_VALUE = 30;
const BRIGHT\_NESS\_VALUE\_DEFAULT = 50;

@Entry
@ComponentV2
struct BrightnessPage {
  @Local brightnessValue: number = BRIGHT\_NESS\_VALUE;
  private defaultBrightnessValue: number = BRIGHT\_NESS\_VALUE\_DEFAULT;

  build() {
    RelativeContainer() {
      // 请将$r('app.string.Brightness')替换为实际资源文件，在本示例中该资源文件的value值为"设置亮度"
      Text($r('app.string.Brightness'))
        .fontColor(Color.White)
        .id('id\_brightness\_set\_text')
        .fontSize(24)
        .margin({ top: 16 })
        .alignRules({
          middle: { anchor: '\_\_container\_\_', align: HorizontalAlign.Center }
        })

      Text(\`${this.brightnessValue} %\`)
        .fontColor(Color.White)
        .id('id\_brightness\_min\_text')
        .margin({ left: 16 })
        .alignRules({
          start: { anchor: '\_\_container\_\_', align: HorizontalAlign.Start },
          center: { anchor: '\_\_container\_\_', align: VerticalAlign.Center }
        })

      Slider({
        value: this.brightnessValue,
        min: 0,
        max: 100,
        style: SliderStyle.InSet
      })
        .blockColor('#191970')
        .trackColor('#ADD8E6')
        .selectedColor('#4169E1')
        .width(150)
        .id('id\_brightness\_slider')
        .margin({ left: 16, right: 16 })
        .onChange((value: number, mode: SliderChangeMode) => {
          this.brightnessValue = value;
        })
        .alignRules({
          center: { anchor: 'id\_brightness\_min\_text', align: VerticalAlign.Center },
          start: { anchor: 'id\_brightness\_min\_text', align: HorizontalAlign.End }
        })

      ArcButton({
        options: new ArcButtonOptions({
          // 请将$r('app.string.Reset')替换为实际资源文件，在本示例中该资源文件的value值为"重置"
          label: $r('app.string.Reset'),
          styleMode: ArcButtonStyleMode.EMPHASIZED\_LIGHT,
          fontSize: new LengthMetrics(19, LengthUnit.FP),
          onClick: () => {
            this.brightnessValue = this.defaultBrightnessValue;
          }
        })
      })
        .alignRules({
          middle: { anchor: '\_\_container\_\_', align: HorizontalAlign.Center },
          bottom: { anchor: '\_\_container\_\_', align: VerticalAlign.Bottom }
        })
    }
    .height('100%')
    .width('100%')
    .backgroundColor(Color.Black)
  }
}

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/bc/v3/4DTKaAkhS9CxoV_LtD1Yfw/zh-cn_image_0000002664207631.png?HW-CC-KV=V1&HW-CC-Date=20260709T132302Z&HW-CC-Expire=86400&HW-CC-Sign=1B88501337BF95E309695CC4174C39DB868A6C5D8474D74AB7D06405D350E742)