HarmonyOS 有没有类似于渐变效果？

Question

如题：HarmonyOS 有没有类似于渐变效果？

Answer 1

实现渐变的方式请参考以下代码：

@Entry
@Component
struct Page240126155113078 {
  @State message: string = 'Hello World';

  build() {
    Row() {
      Column() {
        Row() {
          Text(this.message)
            .fontSize(50)
            .fontWeight(FontWeight.Bold)
            .blendMode(BlendMode.DST_IN, BlendApplyType.OFFSCREEN)
        }.linearGradient({
          direction: GradientDirection.Right,
          colors: [[0x000000, 0.0], [0xffffff, 1.0]]
        }).blendMode(BlendMode.SRC_OVER, BlendApplyType.OFFSCREEN)
      }
      .width('100%')
    }
    .height('100%')
  }
}
 
经过测试以下代码与 提供的截图效果差别不大，那边显示的效果有差异，以下是示例代码:

@Entry
@Component
struct Page240126155113078 {
  @State message: string = '文化莞';

  build() {
    Row() {
      Column() {
        Row() {
          Text(this.message)
            .fontSize(20)
            .fontWeight(FontWeight.Bold)
            .blendMode(BlendMode.DST_IN, BlendApplyType.OFFSCREEN)
        }

        .linearGradient({
          direction: GradientDirection.Right,
          colors: [[0x000000, 0.0], [0xffffff, 0.8]]
        })
        .blendMode(BlendMode.SRC_OVER, BlendApplyType.OFFSCREEN)

      }
      // .backgroundColor(Color.Blue)
      .width('100%')
    }
    .height('100%')
  }
}
按照 的描述，现提供以下参考代码：
@Entry
@Component
struct ListExample {
  @State arr: string[] = ['影视', '生活', '军事','历史', '小说', '电影', '揭秘', '明星', '社会', '大爆炸','好看','精选']
  private scroller: Scroller = new Scroller();

  build() {
    Stack() {
      List({ space: 10 }) {
        ForEach(this.arr, (item: string) => {
          ListItem() {
            Text(item)
              .width(50)
              .height(64)
              .fontColor(Color.Black)
              .backgroundColor(Color.White)
              .textAlign(TextAlign.Center)
          }
        }, (item: string) => item);
      }
      .listDirection(Axis.Horizontal)
      .scrollBar(BarState.Off)
      .padding({ top: 20, bottom: 20 })
      .width("80%")
      .height("100%")

      Stack() {

      }
      .linearGradient({
        angle: 90,
        colors: [ ['rgba(255,255,255,0)', 0.9], [0xffffff, 1.0]]
      })
      .width("80%")
      .height("100%")
      .hitTestBehavior(HitTestMode.None)
    }.height(100).width('100%').backgroundColor(Color.White)
  }
}