智能表结合ArcSlider实现调节屏幕亮度
======================

#### 问题现象

智能表为圆形屏幕的穿戴设备，如何在页面显示弧形滑动条，并通过滑动条调节屏幕亮度？

#### 背景知识

*   [ArcSlider](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ohos-arkui-advanced-arcslider)：弧形滑动条组件，通常用于在圆形屏幕的穿戴设备中快速调节设置值，如音量调节、亮度调节等应用场景。
*   [setWindowBrightness](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-apis-window-window#setwindowbrightness9)：允许应用主窗口设置屏幕亮度值，使用callback异步回调，智能表应用也支持使用。

#### 解决方案

1.  添加ArcSlider组件实现弧形滑动条，[ArcSliderOptionsConstructorOptions](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ohos-arkui-advanced-arcslider#arcslideroptionsconstructoroptions)的onChange事件中把ArcSlider当前的进度值设置为屏幕亮度值。
2.  通过window实例提供的setWindowBrightness方法设置屏幕亮度。

完整示例参考如下：

import {
  ArcSlider,
  ArcSliderOptions,
  ArcSliderValueOptions,
  ArcSliderLayoutOptions,
  ArcSliderStyleOptions,
  ArcSliderValueOptionsConstructorOptions,
  ArcSliderLayoutOptionsConstructorOptions,
  ArcSliderStyleOptionsConstructorOptions,
  ArcSliderOptionsConstructorOptions,
  window
} from '@kit.ArkUI';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@ComponentV2
struct Index {
  _// 通过window实例提供的setWindowBrightness()方法，即可设置屏幕亮度。_
  changeBrightness(brightness: number) {
    try {
      let windowClass: window.Window | undefined \= undefined;
      let promise \= window.getLastWindow(this.getUIContext().getHostContext());
      promise.then((data) \=\> {
        windowClass \= data;
        windowClass.setWindowBrightness(brightness, (err: BusinessError) \=\> {
          const errCode: number \= err.code;
          if (errCode) {
            console.error(\`Failed to set the Brightness value. Cause code: ${err.code}, message: ${err.message}\`);
            return;
          }
        });
      });
    } catch (exception) {
      console.error(\`Failed to set the Brightness value. Cause code: ${exception.code}, message: ${exception.message}\`);
    }
  }

 _ // ArcSliderValueOptions的构造信息，设置当前进度值、最小值和最大值_
  valueOptionsConstructorOptions: ArcSliderValueOptionsConstructorOptions \= {
    progress: 1,
    min: 0,
    max: 1
  };
 _ // ArcSliderLayoutValueOptions的构造信息，设置弧形Slider从下往上滑动_
  layoutOptionsConstructorOptions: ArcSliderLayoutOptionsConstructorOptions \= {
    reverse: true
  };
 _ // ArcSliderStyleOptions的构造信息，设置弧形Slider的描边粗细、描边背景色、描边高亮色、描边背景模糊值_
  styleOptionsConstructorOptions: ArcSliderStyleOptionsConstructorOptions \= {
    trackThickness: 16,
    activeTrackThickness: 24,
    trackColor: '#ffd5d5d5',
    selectedColor: '#ff2787d9',
    trackBlur: 20
  };
  valueOptions: ArcSliderValueOptions \= new ArcSliderValueOptions(this.valueOptionsConstructorOptions);
  layoutOptions: ArcSliderLayoutOptions \= new ArcSliderLayoutOptions(this.layoutOptionsConstructorOptions);
  styleOptions: ArcSliderStyleOptions \= new ArcSliderStyleOptions(this.styleOptionsConstructorOptions);
  arcSliderOptionsConstructorOptions: ArcSliderOptionsConstructorOptions \= {
    valueOptions: this.valueOptions,
    layoutOptions: this.layoutOptions,
    styleOptions: this.styleOptions,
    digitalCrownSensitivity: CrownSensitivity.HIGH,
    _// 弧形Slider的进度值发生变化时触发_
    onChange: (progress: number) \=\> {
      this.changeBrightness(progress);

      let windowClass: window.Window | undefined \= undefined;
      let promise \= window.getLastWindow(this.getUIContext().getHostContext());
      promise.then((data) \=\> {
        windowClass \= data;
        try {
          let properties \= windowClass.getWindowProperties();
          let bright \= properties?.brightness ?? -1;
          this.getUIContext().getPromptAction().openToast({
            message: '屏幕亮度值: ' \+ bright,
            duration: 2000
          }).catch(() \=\> {
            console.error('Failed to open Toast.');
          });
        } catch (error) {
          console.error(\`Failed to get the Window Properties. Cause code: ${error.code}, message: ${error.message}\`);
        }
      });
    }
  };
  arcSliderOptions: ArcSliderOptions \= new ArcSliderOptions(this.arcSliderOptionsConstructorOptions);

  build() {
    Column() {
      if (canIUse('SystemCapability.ArkUI.ArkUI.Circle')) {
        ArcSlider({ options: this.arcSliderOptions });
      }
    }
    .width('100%');
  }
}