基于鸿蒙API10的RTSP播放器(八：音量和亮度调节功能的整合）

一、前言：

笔者在前面第六、七节文章当中，分别指出了音量和屏幕亮度的前置知识，在本节当中，我们将一并实现这两个功能，从而接续第五节内容。本文的逻辑分三大部分，先说用到的变量，再说界面，最后说功能。

其中音量功能，是设置的系统音量，而不是视频音量；其中亮度功能，是设置的应用亮度，而非系统亮度，请注意两者的区别。

亮度功能使用brightness库获取系统亮度值，在初始化亮度值，然后根据触摸情况通过window库设置亮度值

音量功能通过audio库，初始化音量值，根据触摸情况设置音量值

文中代码均是ArkTS代码，使用TS标志，是为了有颜色，好看，嘿嘿！

以下是效果图，即我手指左边垂直向下滑动时，出现亮度调节图标和进度条。
在这里插入图片描述

以下是效果图，即我手指右边垂直向下滑动时，出现音量调节图标和进度条。
在这里插入图片描述

二、状态变量：


// 以下代码均放在struct yourPageName{}结构体内，但在build(){}函数之外// 控制图标和进度条是否显示  
@State volumeVisible:boolean = false;  
@State brightVisible: boolean = false;  // 音量和亮度值  
@State volume:number = 0;  
@State bright:number = 50;  // 手指触点横坐标位置  
@State fingerPosition:number = 0;  // 屏幕一半宽度，我这里是500px  
@State halfDeviceWidth:number = 500;  // 根据全局变量获得窗口控制器 ,这里需要提前在EntryAbility中设置全局变量，并把windowStage放进去，代码附下
windowStage: window.WindowStage = AppStorage.get('windowStage') as window.WindowStage;  
// 获取主窗口的方式  
mainWin: window.Window = this.windowStage.getMainWindowSync();


import AbilityConstant from '@ohos.app.ability.AbilityConstant';  
import hilog from '@ohos.hilog';  
import UIAbility from '@ohos.app.ability.UIAbility';  
import Want from '@ohos.app.ability.Want';  
import window from '@ohos.window';  
import { BusinessError } from '@kit.BasicServicesKit';  export default class EntryAbility extends UIAbility {  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {  hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');  }  onDestroy(): void {  hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy');  }  onWindowStageCreate(windowStage: window.WindowStage): void {  // Main window is created, set main page for this ability  hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');  console.log('onWindowStageCreate');  // 这里设置全局变量，把我们需要的窗体控制器放进去AppStorage.setOrCreate('windowStage',windowStage);  windowStage.loadContent('pages/Index', (err) => {  if (err.code) {  hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');  return;  }  hilog.info(0x0000, 'testTag', 'Succeeded in loading the content.');  });  }  onWindowStageDestroy(): void {  // Main window is destroyed, release UI related resources  hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageDestroy');  }  onForeground(): void {  // Ability has brought to foreground  hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onForeground');  }  onBackground(): void {  // Ability has back to background  hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onBackground');  }  
}

三、界面逻辑：**

这里使用了Stack组件，按照栈概念，可以将图片和进度条在同一时刻一起显示。可以看到笔者这里设置了if语句中的三个变量，分别判断触摸点是否移动，触摸点在屏幕左边还是右边，是否显示。

Stack(){  // 亮度调节UI  if (this.fingerPosition != 0 && this.fingerPosition < this.halfDeviceWidth && this.brightVisible){  Image($r('app.media.ic_bright_white'))  .width(50)  .aspectRatio(1.0)  Progress({value:this.bright,total:100,type:ProgressType.Ring})  .color('#ffffffff')  .width(100)  .aspectRatio(1.0)  // 音量调节UI  }else if (this.fingerPosition != 0 && this.fingerPosition > this.halfDeviceWidth && this.volumeVisible){  Image($r('app.media.ic_volume_white'))  .width(50)  .aspectRatio(1.0)  Progress({value:this.volume,total: 20,type:ProgressType.Ring})  .color('#ffffffff')  .width(100)  .aspectRatio(1.0)  }  
}  // Stack组件可以自行调节，这段代码也可以嵌入进其他代码中，里面的图片随便找一个就好了
.width('100%')  
.height('40%')  
.backgroundColor(Color.Black)

四、功能逻辑：

我们需要在页面渲染之前完成一些初始化的工作，包括主窗体的获取，音量的初始化，亮度的初始化。

当然，也可以直接在第一部分定义变量的时候直接赋值，但直接赋值的弊端就是，以音量调节为例，进度条每次从设置的音量值开始变化，而不是从系统本来的值开始变化。笔者这里的初始化代码附下

// 此函数是生命周期函数，在struct yourPageName(){}中，build(){}之外
aboutToAppear() {  // 初始化音量audioManager.getVolume(audio.AudioVolumeType.MEDIA, (err: BusinessError, value: number) => {  if (err) {  console.error(`Failed to obtain the volume. ${err}`);  return;  }  this.volume = value;  console.info('Callback invoked to indicate that the volume is obtained:'+value);  });  ////  音量初始化，这里代码笔者注释了，选择在定义变量的时候直接赋值0.5
// brightness.getValue({  
//   success: (data: BrightnessResponse) => {  
//     console.log('success get brightness value:' + data.value);  
//     // brightness库中获取的亮度值介于0到255，而window库中设置的亮度值介于0到1，这里在做转换  
//     this.bright = ((data.value/255)*10)%10  
//     try {  
//       this.mainWin.setWindowBrightness(this.bright, (err) => {  
//         if (err.code) {  
//           console.error('Failed to set the brightness. Cause: ' + JSON.stringify(err));  
//           return;  
//         }  
//         console.info('Succeeded in setting the brightness.');  
//       });  
//     } catch (exception) {  
//       console.error('Failed to set the brightness. Cause: ' + JSON.stringify(exception));  
//     }  
//   },  
//   fail: (data: string, code: number) => {  
//     console.error('get brightness fail, code: ' + code + ', data: ' + data);  
//   }  
// });// 初始化主窗体this.windowStage = AppStorage.get('windowStage') as window.WindowStage;  // 获取主窗口的方式  this.mainWin = this.windowStage.getMainWindowSync();  // 获取最上层窗口的方式  // window.getLastWindow(getContext(this));  }

为上面的Stack组件添加触摸事件，具体功能见代码注释，这里面的try-catch语句主要方便调试，代码如果可以正常运行的话，直接去掉try-catch语句和日志打印，那么代码可以很简介。里面最核心的函数是if语句。


Stack(){//代码上面有，此处省略
}
.gesture(  GestureGroup(GestureMode.Exclusive,  // 添加触摸手势，并通过direction控制手势滑动方向为上下滑动  PanGesture({direction:PanDirection.Vertical})  .onActionStart((event: GestureEvent) => {  // 获取屏幕宽度和高度，便于后面的手势操作  if (event.fingerList[0].localX < this.halfDeviceWidth) {  this.brightVisible = true;  } else {  this.volumeVisible = true;  }  })  .onActionEnd(() => {  // 当手指离开屏幕时，清除currentIcon状态和关闭图标/进度条  this.volumeVisible = false;  this.brightVisible = false;  })  .onActionUpdate((event?:GestureEvent| undefined)=>{  // 取得系统亮度，为this.bright赋初值  if (!event) return; // 如果 event 是 undefined，直接返回，不执行后续代码  // 通过event.fingerList[0].localX获取触摸点的横坐标  this.fingerPosition = event.fingerList[0].localX  // 向上滑动  if (event.offsetY < 0){  // 触摸点在屏幕右侧  if (this.volume < 20 && this.fingerPosition > this.halfDeviceWidth){  // 音量值增加  this.volume += 0.2  audioManager.setVolume(audio.AudioVolumeType.MEDIA, this.volume, (err: BusinessError) => {  if (err) {  console.error(`Failed to set the volume. ${err}`);  return;  }  console.info('Callback invoked to indicate a successful volume setting.');  });  }  // 触摸点在屏幕左侧  if (this.bright < 100 && this.fingerPosition < this.halfDeviceWidth){  // 亮度值增加  this.bright += 1  try {  this.mainWin.setWindowBrightness(this.bright / 100 , (err) => {  if (err.code) {  console.error('Failed to set the brightness. Cause: ' + JSON.stringify(err));  return;  }  console.info('Succeeded in setting the brightness.');  });  } catch (exception) {  console.error('Failed to set the brightness. Cause: ' + JSON.stringify(exception));  }  }        // 向下滑动  }else{  // 触摸点在屏幕右侧  if (this.volume > 0 && this.fingerPosition > this.halfDeviceWidth){  // 音量值减小  this.volume -= 0.2  audioManager.setVolume(audio.AudioVolumeType.MEDIA, this.volume, (err: BusinessError) => {  if (err) {  console.error(`Failed to set the volume. ${err}`);  return;  }  console.info('Callback invoked to indicate a successful volume setting.');  });  }  // 触摸点在屏幕左侧  if (this.bright > 0 && this.fingerPosition < this.halfDeviceWidth){  // 亮度值减小  this.bright -= 1  try {  this.mainWin.setWindowBrightness(this.bright / 100 , (err) => {  if (err.code) {  console.error('Failed to set the brightness. Cause: ' + JSON.stringify(err));  return;  }  console.info('Succeeded in setting the brightness.');  });  } catch (exception) {  console.error('Failed to set the brightness. Cause: ' + JSON.stringify(exception));  }  }        }      }),  )  
)