如何通过上下滑动实现亮度和音量调节（ArkUI)

场景说明

在音视频应用中通常可以通过上下滑动来调节屏幕亮度和音量大小，本例即为大家介绍如何实现上述UI效果。

说明：

由于当前亮度和音量调节功能仅对系统应用开发，所以本例仅讲解UI效果的实现。

效果呈现

本例效果如下：

• 当在屏幕左侧滑动时，可以调节亮度，上滑亮度提升，下滑亮度降低。
• 当在屏幕右侧滑动时，可以调节音量，上滑音量增大，下滑音量减小。

环境要求

本例基于以下环境开发，开发者也可以基于其他适配的版本进行开发：

• IDE: DevEco Studio 4.0 Release
• SDK: Ohos_sdk_public 4.0.10.13 (API Version 10 Release)

实现思路

本例中几个关键的功能点及其实现思路如下：

• 区分屏幕左右两侧的滑动，从而使其触发不同效果：通过识别触摸点的坐标（event.fingerList[0].localX）来判断滑动是在左侧还是右侧。
• 区分滑动是上滑还是下滑：通过触摸点在Y轴方向的偏移量（event.offsetY）来识别上滑还是下滑。
• 上滑和下滑控制亮度和音量的大小：亮度和音量的大小使用环形进度条（Progress组件）来呈现，通过滑动改变Progress的value值。

开发步骤

开发步骤仅呈现关键代码，全量代码请参考完整代码章节；另外，开发者在运行时需要将本例中使用的图片等资源替换为本地资源。

1. 搭建UI框架。

   Column(){
     // 添加需要呈现的文本
     Row(){
       Text('左侧滑动')
       Text('右侧滑动')
     }
     Stack(){
       // 亮度调节UI
       Image($r('app.media.ic_brightness'))
       Progress({value:this.bright,type:ProgressType.Ring})
       // 音量调节UI
       Image($r('app.media.ic_volume'))
       Progress({value:this.volume,type:ProgressType.Ring})
     }
   }
   
   

2. 为Column组件添加触摸手势，并通过触摸点的坐标区分左侧滑动和右侧滑动。左右两侧的分界点可以根据屏幕尺寸自行设置，本例采用200为分界点。

   Column(){
   //...
   }
   .gesture(
     GestureGroup(GestureMode.Exclusive,
       // 添加触摸手势，并通过direction控制手势滑动方向为上下滑动
       PanGesture({direction:PanDirection.Vertical})
         .onActionUpdate((event?:GestureEvent)=>{
           // 通过event.fingerList[0].localX获取触摸点的横坐标
           this.fingerPosition = event.fingerList[0].localX
   
           // 当触摸点的横坐标>200时，判定触摸点在屏幕右侧，控制音量
           if (this.fingerPosition > 200){
             //...
           }
           // 当触摸点的横坐标<200时，判定触摸点在屏幕左侧，控制亮度
           if (this.fingerPosition < 200){
             //...
           }
         }),
     )
   )
   

3. 通过触摸点在Y轴方向的偏移量来识别上滑和下滑。

   Column(){
     // ...
   }
   .gesture(
     GestureGroup(GestureMode.Exclusive,
       PanGesture({direction:PanDirection.Vertical})
         .onActionUpdate((event?:GestureEvent)=>{
           this.fingerPosition = event.fingerList[0].localX
           // 当触摸点在Y轴方向的偏移量<0时，滑动方向为上滑
           if (event.offsetY < 0){
             // ...
           // 反之，滑动方向为上滑
           }else{
             // ...
           }
         }),
     )
   )
   
   

4. 手势识别之后，通过手势控制Progress的value值，从而调节亮度和音量的大小。

   Column(){
     // ...
     Stack(){
       // 亮度调节UI
       if (this.fingerPosition != 0 && this.fingerPosition < 200){
         // 通过变量bright控制亮度进度条的变化
         Progress({value:this.bright,type:ProgressType.Ring})
         // 音量调节UI
       }else if (this.fingerPosition != 0 && this.fingerPosition > 200){
         // 通过变量volume控制音量进度条的变化
         Progress({value:this.volume,type:ProgressType.Ring})
       }
     }
   }
   .gesture(
     GestureGroup(GestureMode.Exclusive,
       PanGesture({direction:PanDirection.Vertical})
         .onActionUpdate((event?:GestureEvent)=>{
           this.fingerPosition = event.fingerList[0].localX
           // 向上滑动
           if (event.offsetY < 0){
             // 触摸点在屏幕右侧
             if (this.volume < 100 && this.fingerPosition > 200){
               // 音量值增加
               this.volume += 1
             }
             // 触摸点在屏幕左侧
             if (this.bright < 100 && this.fingerPosition < 200){
               // 亮度值增加
               this.bright += 1
             }
           // 向下滑动
           }else{
             // 触摸点在屏幕右侧
             if (this.volume > 0 && this.fingerPosition > 200){
               // 音量值减小
               this.volume -= 1
             }
             // 触摸点在屏幕左侧
             if (this.bright > 0 && this.fingerPosition < 200){
               // 亮度值减小
               this.bright -= 1
             }
           }
         }),
     )
   )
   

完整代码

本例完整代码如下：

// xxx.ets
@Entry
@Component
struct ChangeVolume{
  @State volume:number = 0
  @State bright:number = 0
  @State fingerPosition:number = 0
  build(){
    Column(){
      // 添加需要呈现的文本
      Row(){
        if (this.fingerPosition != 0 && this.fingerPosition < 200){
          Text('左侧滑动')
            .fontColor('#FD836E')
            .fontSize(20)
            .textAlign(TextAlign.Start)
            .width('85%')
        }
        if (this.fingerPosition != 0 && this.fingerPosition > 200){
          Text('右侧滑动')
            .fontColor('#0AAF88')
            .fontSize(20)
            .textAlign(TextAlign.End)
            .align(Alignment.End)
            .width('100%')
        }
      }
      .width('90%')
      .height('50%')
      .alignItems(VerticalAlign.Bottom)
      Stack(){
        // 亮度调节UI
        if (this.fingerPosition != 0 && this.fingerPosition < 200){
          Image($r('app.media.ic_brightness'))
            .width(100)
            .aspectRatio(1.0)
          Progress({value:this.bright,type:ProgressType.Ring})
            .color('#FD836E')
            .width(105)
            .aspectRatio(1.0)
          // 音量调节UI
        }else if (this.fingerPosition != 0 && this.fingerPosition > 200){
          Image($r('app.media.ic_volume'))
            .width(100)
            .aspectRatio(1.0)
          Progress({value:this.volume,type:ProgressType.Ring})
            .color('#0AAF88')
            .width(105)
            .aspectRatio(1.0)
        }
      }
      .width('100%')
      .height('40%')
    }
    .width('100%')
    .height('100%')
    .gesture(
      GestureGroup(GestureMode.Exclusive,
        // 添加触摸手势，并通过direction控制手势滑动方向为上下滑动
        PanGesture({direction:PanDirection.Vertical})
          .onActionUpdate((event?:GestureEvent)=>{
            // 通过event.fingerList[0].localX获取触摸点的横坐标
            this.fingerPosition = event.fingerList[0].localX
            // 向上滑动
            if (event.offsetY < 0){
              // 触摸点在屏幕右侧
              if (this.volume < 100 && this.fingerPosition > 200){
                // 音量值增加
                this.volume += 1
              }
              // 触摸点在屏幕左侧
              if (this.bright < 100 && this.fingerPosition < 200){
                // 亮度值增加
                this.bright += 1
              }
            // 向下滑动
            }else{
              // 触摸点在屏幕右侧
              if (this.volume > 0 && this.fingerPosition > 200){
                // 音量值减小
                this.volume -= 1
              }
              // 触摸点在屏幕左侧
              if (this.bright > 0 && this.fingerPosition < 200){
                // 亮度值减小
                this.bright -= 1
              }
            }
          }),
      )
    )
  }
}

为了能让大家更好的学习鸿蒙 (Harmony OS) 开发技术，这边特意整理了《鸿蒙 (Harmony OS)开发学习手册》（共计890页），希望对大家有所帮助：https://qr21.cn/FV7h05

《鸿蒙 (Harmony OS)开发学习手册》

入门必看：https://qr21.cn/FV7h05

1. 应用开发导读(ArkTS)
2. 应用开发导读(Java)

HarmonyOS 概念：https://qr21.cn/FV7h05

1. 系统定义
2. 技术架构
3. 技术特性
4. 系统安全

如何快速入门：https://qr21.cn/FV7h05

1. 基本概念
2. 构建第一个ArkTS应用
3. 构建第一个JS应用
4. ……

开发基础知识：https://qr21.cn/FV7h05

1. 应用基础知识
2. 配置文件
3. 应用数据管理
4. 应用安全管理
5. 应用隐私保护
6. 三方应用调用管控机制
7. 资源分类与访问
8. 学习ArkTS语言
9. ……

基于ArkTS 开发：https://qr21.cn/FV7h05

1. Ability开发
2. UI开发
3. 公共事件与通知
4. 窗口管理
5. 媒体
6. 安全
7. 网络与链接
8. 电话服务
9. 数据管理
10. 后台任务(Background Task)管理
11. 设备管理
12. 设备使用信息统计
13. DFX
14. 国际化开发
15. 折叠屏系列
16. ……