• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 弧形按钮 (ArcButton)
2<!--Kit: ArkUI-->
3<!--Subsystem: ArkUI-->
4<!--Owner: @liyi0309-->
5<!--Designer: @liyi0309-->
6<!--Tester: @lxl007-->
7<!--Adviser: @HelloCrease-->
8
9
10ArcButton是弧形按钮组件，用于圆形屏幕。为手表用户提供强调、普通、警告等样式按钮。具体用法请参考[ArcButton](../reference/apis-arkui/arkui-ts/ohos-arkui-advanced-ArcButton.md)。
11
12
13## 创建按钮
14
15ArcButton通过调用以下接口来创建。
16
17  ```ts
18ArcButton({
19    options: new ArcButtonOptions({
20      label: 'OK',
21      position: ArcButtonPosition.TOP_EDGE,
22      styleMode: ArcButtonStyleMode.EMPHASIZED_LIGHT
23    })
24})
25  ```
26
27  其中，[label](../reference/apis-arkui/arkui-ts/ohos-arkui-advanced-ArcButton.md#arcbuttonoptions)设置按钮文字，[position](../reference/apis-arkui/arkui-ts/ohos-arkui-advanced-ArcButton.md#arcbuttonoptions)设置按钮类型，[styleMode](../reference/apis-arkui/arkui-ts/ohos-arkui-advanced-ArcButton.md#arcbuttonoptions)设置按钮样式。
28
29  ![top](figures/ArcButtonTop.png)
30
31## 设置按钮类型
32
33ArcButton有上弧形按钮和下弧形按钮两种类型。使用[position](../reference/apis-arkui/arkui-ts/ohos-arkui-advanced-ArcButton.md#arcbuttonoptions)设置按钮类型。
34
35- 下弧形按钮（默认类型）。
36
37  通过将[position](../reference/apis-arkui/arkui-ts/ohos-arkui-advanced-ArcButton.md#arcbuttonoptions)属性设置为ArcButtonPosition.BOTTOM_EDGE，可以将按钮设置为下弧形按钮。
38
39  ```ts
40  ArcButton({
41    options: new ArcButtonOptions({
42      label: 'OK',
43      position: ArcButtonPosition.BOTTOM_EDGE,
44      styleMode: ArcButtonStyleMode.EMPHASIZED_LIGHT
45    })
46  })
47  ```
48
49  ![bottom](figures/ArcButtonBottom.png)
50
51- 上弧形按钮。
52
53  通过将[position](../reference/apis-arkui/arkui-ts/ohos-arkui-advanced-ArcButton.md#arcbuttonoptions)属性设置为ArcButtonPosition.TOP_EDGE，可以将按钮设置为上弧形按钮。
54
55  ```ts
56  ArcButton({
57    options: new ArcButtonOptions({
58      label: 'OK',
59      position: ArcButtonPosition.TOP_EDGE,
60      styleMode: ArcButtonStyleMode.EMPHASIZED_LIGHT
61    })
62  })
63  ```
64
65  ![top](figures/ArcButtonTOP_EDGE.png)
66
67## 自定义样式
68
69- 设置背景色。
70
71  使用[backgroundColor](../reference/apis-arkui/arkui-ts/ohos-arkui-advanced-ArcButton.md#arcbuttonoptions)属性设置按钮的背景色。
72
73  ```ts
74  ArcButton({
75    options: new ArcButtonOptions({
76      label: 'OK',
77      styleMode: ArcButtonStyleMode.CUSTOM,
78      backgroundColor: ColorMetrics.resourceColor('#707070')
79    })
80  })
81  ```
82
83  ![custom_bg](figures/ArcButtonCustom_bg.png)
84
85- 设置文本颜色。
86
87  使用[fontColor](../reference/apis-arkui/arkui-ts/ohos-arkui-advanced-ArcButton.md#arcbuttonoptions)属性设置按钮的文本颜色。
88
89  ```ts
90  ArcButton({
91    options: new ArcButtonOptions({
92      label: 'OK',
93      styleMode: ArcButtonStyleMode.CUSTOM,
94      backgroundColor: ColorMetrics.resourceColor('#E84026'),
95      fontColor: ColorMetrics.resourceColor('#707070')
96    })
97  })
98  ```
99
100  ![custom_font](figures/ArcButtonCustom_font.png)
101
102- 设置阴影颜色。
103
104  使用[shadowEnabled](../reference/apis-arkui/arkui-ts/ohos-arkui-advanced-ArcButton.md#arcbuttonoptions)属性启用按钮阴影，并通过[shadowColor](../reference/apis-arkui/arkui-ts/ohos-arkui-advanced-ArcButton.md#arcbuttonoptions)属性设置按钮的阴影颜色。
105
106  ```ts
107  ArcButton({
108    options: new ArcButtonOptions({
109      label: 'OK',
110      shadowEnabled: true,
111      shadowColor: ColorMetrics.resourceColor('#ffec1022')
112    })
113  })
114  ```
115
116  ![custom_shadow](figures/ArcButtonCustom_shadow.png)
117
118## 添加事件
119
120- 绑定onClick事件来响应点击操作后的自定义行为。
121
122  ```ts
123  ArcButton({
124    options: new ArcButtonOptions({
125      label: 'OK',
126      onClick: () => {
127        console.info('ArcButton onClick')
128      }
129    })
130  })
131  ```
132
133- 绑定onTouch事件来响应触摸操作后的自定义行为。
134
135  ```ts
136  ArcButton({
137    options: new ArcButtonOptions({
138      label: 'OK',
139      onTouch: (event: TouchEvent) => {
140        console.info('ArcButton onTouch')
141      }
142    })
143  })
144  ```
145
146## 场景示例
147
148在亮度设置界面，进度条显示当前亮度为30%。点击重置后，亮度值将被重置为默认的50%。
149
150运行该示例需要Wearable设备的支持。在src/main目录下的工程配置文件[module.json5](../quick-start/module-configuration-file.md)中[deviceTypes标签](../quick-start/module-configuration-file.md#devicetypes标签)内配置wearable。
151
152```json
153// module.json5
154{
155  "module": {
156    // ...
157    "deviceTypes": [
158      "wearable",
159      "phone"
160    ]
161    // ...
162  }
163}
164```
165
166```ts
167import { LengthMetrics, LengthUnit, ArcButton, ArcButtonOptions, ArcButtonStyleMode } from '@kit.ArkUI';
168
169@Entry
170@ComponentV2
171struct BrightnessPage {
172  @Local brightnessValue: number = 30;
173  private defaultBrightnessValue: number = 50;
174
175  build() {
176    RelativeContainer() {
177      Text('设置亮度')
178        .fontColor(Color.White)
179        .id('id_brightness_set_text')
180        .fontSize(24)
181        .margin({ top: 16 })
182        .alignRules({
183          middle: { anchor: '__container__', align: HorizontalAlign.Center }
184        })
185
186      Text(`${this.brightnessValue} %`)
187        .fontColor(Color.White)
188        .id('id_brightness_min_text')
189        .margin({ left: 16 })
190        .alignRules({
191          start: { anchor: '__container__', align: HorizontalAlign.Start },
192          center: { anchor: '__container__', align: VerticalAlign.Center }
193        })
194
195      Slider({
196        value: this.brightnessValue,
197        min: 0,
198        max: 100,
199        style: SliderStyle.InSet
200      })
201        .blockColor('#191970')
202        .trackColor('#ADD8E6')
203        .selectedColor('#4169E1')
204        .width(150)
205        .id('id_brightness_slider')
206        .margin({ left: 16, right: 16 })
207        .onChange((value: number, mode: SliderChangeMode) => {
208          this.brightnessValue = value;
209        })
210        .alignRules({
211          center: { anchor: 'id_brightness_min_text', align: VerticalAlign.Center },
212          start: { anchor: 'id_brightness_min_text', align: HorizontalAlign.End }
213        })
214
215      ArcButton({
216        options: new ArcButtonOptions({
217          label: '重置',
218          styleMode: ArcButtonStyleMode.EMPHASIZED_LIGHT,
219          fontSize: new LengthMetrics(19, LengthUnit.FP),
220          onClick: () => {
221            this.brightnessValue = this.defaultBrightnessValue;
222          }
223        })
224      })
225        .alignRules({
226          middle: { anchor: '__container__', align: HorizontalAlign.Center },
227          bottom: { anchor: '__container__', align: VerticalAlign.Bottom }
228        })
229    }
230    .height('100%')
231    .width('100%')
232    .backgroundColor(Color.Black)
233  }
234}
235  ```
236
237  ![example](figures/example_normal.png)