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