Slider组件调节系统音量
==============

#### 问题现象

自定义[Slider](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-slider)组件如何调节系统音量，同时系统音量调节如何同步到Slider组件？

#### 背景知识

[Slider](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-slider)滑动条组件，通常用于快速调节设置值，如音量调节、亮度调节等应用场景。[音量面板AVVolumePanel](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ohos-multimedia-avvolumepanel)提供展示和调节系统音量的统一面板。[on('streamVolumeChange')](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-apis-audio-audiovolumemanager#onstreamvolumechange20)监听系统音频流音量变化事件（当系统音频流音量发生变化时触发）。

#### 解决方案

Slider组件可以通过音量面板AVVolumePanel调节系统音量，同时可以通过on('streamVolumeChange')监听系统音量变化同步给Slider组件。示例代码如下：

import { audio, AVVolumePanel } from '@kit.AudioKit';

let streamUsage: audio.StreamUsage \= audio.StreamUsage.STREAM\_USAGE\_MUSIC;
let audioManager \= audio.getAudioManager();
let audioVolumeManager: audio.AudioVolumeManager \= audioManager.getVolumeManager();
let volumeMin: number \= audioVolumeManager.getMinVolumeByStream(streamUsage);
let volumeMax: number \= audioVolumeManager.getMaxVolumeByStream(streamUsage);
const tag \= '\[SliderVolumeDemo\]';

@Entry
@Component
export struct SliderVolumeDemo {
  @State volumeLevel: number \= 0; _// 音量值和滑块值使用同一个变量_

  aboutToAppear(): void {
    console.info(\`${tag} volume min:${volumeMin} max:${volumeMax}\`);

    this.volumeLevel \= audioVolumeManager.getVolumeByStream(streamUsage);
   _ // 监听音量变化，同时改变滑块值_
    audioVolumeManager.on('streamVolumeChange', streamUsage, (streamVolumeEvent: audio.StreamVolumeEvent) \=\> {
      console.info(\`${tag} volumeLevel:${streamVolumeEvent.volume}\`);
      this.volumeLevel \= streamVolumeEvent.volume;
    });

  }

  build() {
    Column({ space: 8 }) {
      Row() {
        Slider({
          value: $$this.volumeLevel,
          min: volumeMin,
          max: volumeMax,
          style: SliderStyle.OutSet
        })
          .showTips(true);
      }
      .width('100%');

      Row() {
      _  // 音量面板_
        AVVolumePanel({
          volumeLevel: this.volumeLevel,
          volumeParameter: {
            position: {
              x: 1100, _// 音量面板位置，当不需要显示面板时，position的x，y值可设置负数_
              y: 300
            }
          }
        });
      }
      .width('100%');
    }
    .padding(20)
    .justifyContent(FlexAlign.Center)
    .height('100%')
    .width('100%');
  }
}