#鸿蒙通关秘籍#如何实现HarmonyOS边缘内容渐变效果？

在HarmonyOS中实现边缘内容渐变效果可以通过以下步骤实现：

1. 创建一个底层List页面，设置列表方向和大小，并通过overlay属性使用自定义的渐变背景：

   List({ space: Const.EXAMPLE_IMAGE_GAP }) {
     ForEach(this.textArray, () => {
       ListItem() {
         Image($r("app.media.fadingedge_example1"))
           .width($r('app.integer.fadingedge_example_image_width'))
           .height($r('app.integer.fadingedge_example_height'))
           .borderRadius($r('app.integer.fadingedge_example_image_border_radius'))
       }
     }, (item: number) => item.toString())
   }
   .listDirection(Axis.Horizontal)
   .width($r('app.string.fadingedge_fill_size'))
   .height($r('app.integer.fadingedge_list_height'))
   .overlay(this.fadingOverlay())
   .edgeEffect(EdgeEffect.None)
   .scrollBar(BarState.Off)
   1.
   2.
   3.
   4.
   5.
   6.
   7.
   8.
   9.
   10.
   11.
   12.
   13.
   14.
   15.
   16.

   复制

2. 使用linearGradient创建渐变效果的遮罩层：

   @Builder
   fadingOverlay() {
     Column()
       .width($r('app.string.fadingedge_fill_size'))
       .height($r('app.integer.fadingedge_list_height'))
       .linearGradient({
         angle: Const.OVERLAY_LINEAR_GRADIENT_ANGLE,
         colors: [
           [this.linearGradientBeginColor, Const.OVERLAY_LINEAR_GRADIENT_COLOR_POS[0]],
           [Const.BEGIN_COLOR, Const.OVERLAY_LINEAR_GRADIENT_COLOR_POS[1]],
           [Const.BEGIN_COLOR, Const.OVERLAY_LINEAR_GRADIENT_COLOR_POS[2]],
           [this.linearGradientEndColor, Const.OVERLAY_LINEAR_GRADIENT_COLOR_POS[3]],
         ]
       })
       .animation({
         curve: Curve.Ease,
         duration: Const.DURATION
       })
       .hitTestBehavior(HitTestMode.Transparent)
   }
   1.
   2.
   3.
   4.
   5.
   6.
   7.
   8.
   9.
   10.
   11.
   12.
   13.
   14.
   15.
   16.
   17.
   18.
   19.
   20.

   复制

3. 使用onReachStart和onReachEnd接口动态调整渐变的起始与结束颜色：

   .onReachStart(() => {
     this.linearGradientBeginColor = Const.BEGIN_COLOR;
     this.linearGradientEndColor = Const.END_COLOR;
   })
   .onReachEnd(() => {
     this.linearGradientBeginColor = Const.END_COLOR;
     this.linearGradientEndColor = Const.BEGIN_COLOR;
   })
   1.
   2.
   3.
   4.
   5.
   6.
   7.
   8.

   复制