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

野生菌君

发布于 2023-12-6 15:32

浏览

1收藏

场景说明

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

说明：

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

效果呈现

本例效果如下：

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

如何通过上下滑动实现亮度和音量调节（ArkUI）-鸿蒙开发者社区

环境要求

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

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值。

开发步骤

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

搭建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})
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

为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){
          //...
        }
      }),
  )
)
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.

通过触摸点在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{
          // ...
        }
      }),
  )
)
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.

手势识别之后，通过手势控制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
          }
        }
      }),
  )
)
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.

完整代码

本例完整代码如下：

// 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
              }
            }
          }),
      )
    )
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.

参考

©著作权归作者所有，如需转载，请注明出处，否则将追究法律责任

分类

标签

已于2024-1-16 09:13:11修改

2条回复

按时间正序

按时间倒序

红叶亦知秋

动画是真的丝滑

2023-12-6 17:32:45

愤怒枇杷

代码好像有点问题，文档上说fingerList属性只用于TapGesture和LongPressGesture，没有说用于panGesture，所以代码中好像没有办法获得滑动点的坐标值

2023-12-8 16:49:49

51CTO

51CTO博客

51CTO学堂

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

场景说明

效果呈现

环境要求

实现思路

开发步骤

完整代码

参考

目录

订阅鸿蒙技术特刊，精选内容抢先看

51CTO

51CTO博客

51CTO学堂

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

场景说明

效果呈现

环境要求

实现思路

开发步骤

完整代码

参考

目录

订阅鸿蒙技术特刊，精选内容抢先看

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