HarmonyOS鸿蒙Next中实现音量滚动页面，组件封装可直接使用

HarmonyOS鸿蒙Next中实现音量滚动页面，组件封装可直接使用

import { Colors } from "utils";

class blurDataItem {
  text: string = '';
  isChecked: boolean = false;
  icon: string = '';
}

@Component
export struct volumeRoll {
  private scrollerForScale: Scroller = new Scroller();
  @State scaleSelected: number = 50; // 默认刻度值设置为 100
  @State blurDataList: blurDataItem[] = [];
  @State scaleList: number[] = Array.from<number, number>({ length: 201 }, (_, i) => i); // 0 到 200
  @State duration: number = 5.8;

  build() {
    Row() {
      Row() {
        Stack({ alignContent: Alignment.Top }) {
          List({ scroller: this.scrollerForScale }) {
            // 初始分隔线
            ForEach(this.scaleList.slice(0, 28), (item: number, index: number) => {
              ListItem() {
                Divider()
                  .vertical(true)
                  .color('#00000000')
                  .height(12)
                  .strokeWidth(1)
                  .margin({ right: 5 })
                  .borderRadius(2);
              }.height('100%');
            }, (item: blurDataItem) => JSON.stringify(item));

            // 主刻度
            ForEach(this.scaleList, (item: number, index: number) => {
              ListItem() {
                Stack({ alignContent: Alignment.Top }) {
                  Row()
                    .backgroundColor(
                      index === 0 || index % 10 === 0
                        ? Colors.ui_common_white
                        : index === this.scaleSelected
                        ? Colors.ui_common_white
                        : '#485055'
                    )
                    .height(this.scaleSelected === index ? 22 : 12)
                    .width(this.scaleSelected === index ? 1.5 : 1)
                    .margin({ right: 5, top: this.scaleSelected === index ? 30 : 40 })
                    .borderRadius(2);

                  if (index === 0 || index % 10 === 0) {
                    Text((index === 0 ? 0 : index) + '')
                      .fontSize(10)
                      .fontColor('#485055');
                  }
                }
              }.height('100%');
            }, (item: blurDataItem) => JSON.stringify(item));

            // 空 ListItem 用于间距
            ListItem() {}.height('100%').width('48%');
          }
          .width('100%')
          .height(70)
          .edgeEffect(EdgeEffect.None)
          .friction(20)
          .listDirection(Axis.Horizontal)
          .scrollBar(BarState.Off)
          .onAppear(() => {
            setTimeout(() => {
              console.log('Scrolling to index 100'); // 添加日志
              this.scrollerForScale.scrollToIndex(50); // 滚动到索引 100
            }, 100); // 延迟 100ms
          })
          .onScrollIndex((start: number, end: number, center: number) => {
            console.log('START: ' + start);
            console.log('END: ' + end);
            console.log('CENTER: ' + center);

            this.scaleSelected = Math.max(center - 28, 0); // 确保不小于 0
            this.duration = Number((this.scaleSelected + 1) * 10);

            console.log(this.scaleSelected + ' scaleSelected');
          });

          // 显示选中的刻度值
          Text(this.scaleSelected + '')
            .fontSize(10)
            .fontColor(Colors.ui_common_black)
            .backgroundColor(Colors.ui_common_white)
            .padding({
              top: 2,
              bottom: 2,
              left: 8,
              right: 8,
            })
            .borderRadius(6)
            .margin({ top: 6 });
        }
      }
      .width('100%')
      .height(70);
    }
  }
}

更多关于HarmonyOS鸿蒙Next中实现音量滚动页面，组件封装可直接使用的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

厉害了大佬，以后有这样优秀代码，分享越多越好

更多关于HarmonyOS鸿蒙Next中实现音量滚动页面，组件封装可直接使用的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中实现音量滚动页面，可以通过封装组件来实现。具体步骤如下：

  1. 创建自定义组件：首先，创建一个自定义组件，用于封装音量滚动的逻辑和UI。可以使用@Component装饰器来定义组件。

  2. 使用Scroll组件：在自定义组件中使用Scroll组件来实现滚动效果。Scroll组件可以嵌套其他UI组件，如Text、Image等。

  3. 处理滚动事件：通过监听Scroll组件的onScroll事件，获取滚动的位置信息，并根据滚动位置调整音量的显示。

  4. 音量控制逻辑：在组件中实现音量控制的逻辑，可以根据滚动位置计算音量值，并触发相应的音量调整操作。

  5. 封装组件：将上述逻辑和UI封装到一个独立的组件中，方便在其他页面中直接使用。

示例代码如下：

@Component
export struct VolumeScroll {
  @State private volume: number = 50;

  build() {
    Scroll({ scrollable: ScrollDirection.Vertical })
      .onScroll((event: ScrollEvent) => {
        const scrollY = event.scrollY;
        this.volume = Math.min(100, Math.max(0, 100 - scrollY / 2));
      })
      .height('100%')
      .width('100%')
      .backgroundColor(Color.White)
      .child(
        Column() {
          Text(`当前音量: ${this.volume}%`)
            .fontSize(20)
            .margin({ top: 20 });
        }
        .alignItems(HorizontalAlign.Center)
        .justifyContent(FlexAlign.Center)
        .width('100%')
        .height('100%')
      );
  }
}

在这个示例中，VolumeScroll组件封装了音量滚动的逻辑和UI。通过监听Scroll组件的滚动事件，根据滚动位置调整音量值，并在页面上显示当前音量。

在HarmonyOS鸿蒙Next中，可以通过封装ScrollView和Slider组件实现音量滚动页面。以下是一个简单的封装示例：

import { Slider, ScrollView, Text, View } from '@ohos/harmony';

class VolumeScrollPage extends View {
  constructor() {
    super();
    this.buildUI();
  }

  buildUI() {
    const scrollView = new ScrollView();
    const slider = new Slider();
    slider.min = 0;
    slider.max = 100;
    slider.value = 50;
    slider.onChange((value) => {
      console.log(\`当前音量: \${value}\`);
    });

    scrollView.addComponent(slider);
    this.addComponent(scrollView);
  }
}

export default VolumeScrollPage;

将此组件导入并添加到页面中即可直接使用，滑动滑块即可调整音量。

回到顶部