HarmonyOS鸿蒙Next中如何给一个横向list增加一个滑动后，右侧渐隐的效果？

HarmonyOS鸿蒙Next中如何给一个横向list增加一个滑动后，右侧渐隐的效果？ 当前使用overlay+if条件，滑动后list元素无法响应点击事件。

5 回复

问题分析 当前使用Overlay+if条件导致List元素无法响应点击事件，是因为Overlay会覆盖底层组件的事件响应。需改用渐变遮罩层方案，通过绝对定位的线性渐变避免事件拦截。

解决方案 1. 核心思路

  • 使用Stack组件包裹List和渐变遮罩层
  • 遮罩层采用Row布局的线性渐变（LinearGradient）
  • 设置遮罩层pointerEvents为None确保穿透点击事件

2. 代码实现

import { LinearGradient } from '@kit.ArkGraphics2D'

struct FadingList {
  private number[] = [1, 2, 3, 4, 5]
  
  build() {
    Stack() {
      // 横向List
      List({ space: 10 }) {
        ForEach(this.data, (item) => {
          ListItem() {
            Text(item.toString())
              .width(100)
              .height(100)
              .backgroundColor(Color.Orange)
              .onClick(() => {
                console.log(`Item ${item} clicked`)
              })
          }
        })
      }
      .listDirection(Axis.Horizontal) // 横向排列
      .width('100%')
      .height(120)

      // 右侧渐隐遮罩层
      Row() {
        LinearGradient({
          angle: 90,
          direction: GradientDirection.Right,
          colors: [[0x00000000, 0.0], [0x00000000, 0.8], [0x000000FF, 1.0]]
        })
      }
      .width(80)
      .height('100%')
      .position({ x: '100%' })
      .margin({ right: -80 }) // 右对齐
      .pointerEvents(PointerEvent.None) // 关键：穿透点击事件
    }
    .width('100%')
    .height(120)
  }
}

更多关于HarmonyOS鸿蒙Next中如何给一个横向list增加一个滑动后，右侧渐隐的效果？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


提供一个左道方式：找UI要个渐变透明的图片，放在列表的右侧。绝对定位盖在上面。

给横向 List 的尾部，加一个带渐变的 overlay。

cke_7750.png

@Entry
@Component
struct Index {
  build() {
    Column() {
      List({ space: 80 }) {
        ForEach([1, 2, 3, 4, 5, 6], (item: number) => {
          ListItem() {
            Text(item.toString())
              .fontColor('#fff')
              .textAlign(TextAlign.Center)
              .height('100%')
          }
        })
      }
      .width('100%')
      .backgroundColor('#ff1a8be2')
      .height(50)
      .listDirection(Axis.Horizontal)
      .contentEndOffset(20)
      .overlay(this.gradientOverlay, { align: Alignment.End })
    }
    .padding({ top: 100 })
    .height('100%')
    .backgroundColor('#ffd6d1d1')
  }

  @Builder
  gradientOverlay() {
    Row()
      .height(50)
      .width(20)
      .linearGradient({
        angle: 90,
        colors: [['#00ffffff', 0], ['#ffffff', 1]]
      })
  }
}

在HarmonyOS Next中，为横向List添加右侧渐隐效果，可使用LinearGradient遮罩。在List组件外包裹Stack，上层叠加Row布局的渐变Rectangle。将Rectangle的linearGradient角度设为0，定义从透明到背景色的渐变。通过scroll事件监听滚动位置，动态计算并更新Rectangle的宽度或透明度，实现滚动时渐隐。

在HarmonyOS Next中，为横向List实现滑动时右侧渐隐效果，同时确保列表项点击事件正常响应，建议使用Scroll组件结合Stack和LinearGradient实现，避免使用Overlay和条件渲染干扰事件传递。

核心思路如下：

  1. 布局结构：使用Scroll作为横向滚动容器，内部放置Row或List组件展示内容。再通过Stack将滚动容器与渐隐层叠加。

  2. 渐隐效果：在Stack的顶部对齐位置，放置一个Row组件，其背景设置为从透明到页面背景色的水平线性渐变（LinearGradient）。通过Scroll的onScroll事件，可以动态计算和控制该渐隐层的显示与隐藏（例如滚动到最右侧时隐藏）。

  3. 代码示例：

@Entry
@Component
struct FadeListExample {
  private scrollOffset: number = 0
  private listWidth: number = 0
  private scrollWidth: number = 0

  build() {
    Stack({ alignContent: Alignment.End }) {
      // 1. 横向滚动列表
      Scroll(.horizontal) {
        Row() {
          // 你的列表项内容...
          ForEach(this.itemArray, (item) => {
            YourListItemComponent({ item })
              .onClick(() => {
                // 点击事件可以正常触发
              })
          })
        }
      }
      .onScroll((xOffset: number) => {
        this.scrollOffset = xOffset
        // 根据滚动位置判断是否显示渐隐层
      })
      .onAreaChange((oldArea, newArea) => {
        this.scrollWidth = newArea.width
      })

      // 2. 右侧渐隐层
      Row()
        .width(40) // 渐隐层宽度
        .height('100%')
        .background(
          new LinearGradient({
            angle: 180, // 水平方向，从右向左渐变
            colors: [['#00FFFFFF', '#FFFFFFFF']] // 从透明到背景色
          })
        )
        .opacity(this.shouldShowFade() ? 1 : 0) // 根据滚动位置控制透明度
        .enabled(false) // 关键：禁用渐隐层自身的事件响应，确保点击能穿透到下方List
    }
    .width('100%')
    .height(100)
  }

  private shouldShowFade(): boolean {
    // 计算逻辑：当未滚动到最右侧时显示渐隐层
    const tolerance = 2
    return this.scrollOffset < this.scrollWidth - this.listWidth - tolerance
  }
}

关键点：

  • 将渐隐层设置为enabled(false)，使其不拦截点击事件，确保下方Scroll内的列表项可以正常接收点击。
  • 通过onScroll和onAreaChange回调获取滚动位置和容器尺寸，用于精确控制渐隐层的显示时机。
  • 渐隐层的颜色终点（#FFFFFFFF）应与你的实际页面背景色一致。

这种方法通过视觉叠加而非条件渲染来创建渐隐效果，保持了组件树的稳定性，因此不会影响列表项的事件响应。

回到顶部