HarmonyOS鸿蒙Next中如何根据List滑动距离设置顶部View的背景透明度？

HarmonyOS鸿蒙Next中如何根据List滑动距离设置顶部View的背景透明度？ 如何根据 List 滑动距离设置顶部View的背景透明度？
页面顶部有一个固定的view，下面有一个List。
当List在最顶端时，View的背景透明度是0，
当 List 滑动时 透明度逐渐增大，当滑动到100 时，透明度1。
有没有这样的demo？

3 回复

可根据List组件的偏移量动态设置view的透明度：

@Entry
@Component
struct ListExample {
  private arr: number[] = []
  private scrollerForList: Scroller = new Scroller()

  aboutToAppear() {
    for (let i = 0; i < 20; i++) {
      this.arr.push(i)
    }
  }
  build() {
    Column() {
      Row() {
        List({ space: 20, initialIndex: 3, scroller: this.scrollerForList }) {
          ForEach(this.arr, (item: number) => {
            ListItem() {
              Text('' + item)
                .width('100%').height(100).fontSize(16)
                .textAlign(TextAlign.Center)
            }
            .borderRadius(10).backgroundColor(0xFFFFFF)
            .width('60%')
            .height('80%')
          }, (item: number) => JSON.stringify(item))
        }
        .onScroll(() =>{
          console.log(this.scrollerForList.currentOffset().xOffset+' this.scrollerForList.currentOffset().xOffset')
        })
        .chainAnimation(true)
        .edgeEffect(EdgeEffect.Spring)
        .listDirection(Axis.Horizontal)
        .height('100%')
        .width('100%')
        .scrollSnapAlign(ScrollSnapAlign.CENTER)
          .borderRadius(10)
          .backgroundColor(0xDCDCDC)
      }
      .width('100%')
      .height('100%')
      .backgroundColor(0xDCDCDC)
        .padding({ top: 10 })
    }
  }
}

更多关于HarmonyOS鸿蒙Next中如何根据List滑动距离设置顶部View的背景透明度？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，你可以使用ScrollView或ListContainer的滑动事件来监听滑动距离，并根据滑动距离动态设置顶部View的背景透明度。具体步骤如下：

  1. 监听滑动事件：为ScrollView或ListContainer添加滑动事件监听器，获取滑动的垂直距离。

  2. 计算透明度：根据滑动距离计算透明度值。透明度通常是一个0到1之间的浮点数，0表示完全透明，1表示完全不透明。

  3. 设置背景透明度：将计算出的透明度值应用到顶部View的背景上。

以下是一个简单的代码示例：

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

class MyComponent {
  private scrollView: ScrollView;
  private topView: View;

  constructor() {
    this.scrollView = new ScrollView();
    this.topView = new View();

    this.scrollView.setOnScrollListener((scrollY: number) => {
      const maxScroll = 200; // 最大滑动距离
      const alpha = Math.min(1, scrollY / maxScroll); // 计算透明度
      this.topView.setBackgroundColor(`rgba(0, 0, 0, ${alpha})`); // 设置背景透明度
    });
  }
}

在这个示例中，scrollY表示垂直滑动的距离，maxScroll是你设定的最大滑动距离。通过scrollY / maxScroll计算出透明度，并将其应用到topView的背景颜色中。

通过这种方式，你可以根据List的滑动距离动态调整顶部View的背景透明度。

在HarmonyOS鸿蒙Next中，可以通过监听List的滑动事件来计算滑动距离，并根据该距离动态设置顶部View的背景透明度。具体步骤如下：

  1. 获取List的滑动距离：使用OnScrollListener监听List的滑动事件，通过scrollY获取垂直滑动距离。

  2. 计算透明度：根据滑动距离与预设的最大距离的比值，计算出透明度值（0到1之间）。

  3. 设置背景透明度：将计算出的透明度值应用到顶部View的背景上，使用setBackgroundColor并传入带有透明度值的颜色。

示例代码：

list.setOnScrollListener(new OnScrollListener() {
    @Override
    public void onScroll(int scrollY) {
        float alpha = Math.min(1.0f, scrollY / maxScrollDistance);
        topView.setBackgroundColor(Color.argb((int)(alpha * 255), 255, 255, 255));
    }
});

通过这种方式，可以根据List的滑动距离动态调整顶部View的背景透明度。

回到顶部