HarmonyOS 鸿蒙Next 图片渐变切换问题，请问怎么实现

demo如下：

import { promptAction } from '[@kit](/user/kit).ArkUI';

import {getImageColor} from './ImageUtils'

[@Entry](/user/Entry)

[@Component](/user/Component)

struct SwiperPage {

  [@State](/user/State) message: string = 'Hello World';

  [@State](/user/State) baseColors: Array<[

    ResourceColor,

    number

  ]> = [[Color.Blue, 0.0], [0x0000ff, 0.3], [0xff0000, 1.0], ]

  [@State](/user/State) baseColorsCol2: Array<[

    ResourceColor,

    number

  ]> = [[Color.Blue, 0.0], [0x0000ff, 0.3], [0xff0000, 1.0], ]

  swiperController:SwiperController = new SwiperController()

  swiperItems: SwiperItemData[] = [

    new SwiperItemData(ImageUrl, '内容1'),

    new SwiperItemData(ImageUrl, '内容2'),

    new SwiperItemData(ImageUrl, '内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3'),

  ]

  newsItems: NewsItemData[] = [

    new NewsItemData('学习卡|坚持以人民为中心谋划和和推进改革', '央视新闻客户端 08-26'),

    new NewsItemData('习言道|中国共产党始终把统一战线摆在重要位置', '中国新闻网 08-26'),

    new NewsItemData('习言道|中国共产党始终把统一战线摆在重要位置', '中国新闻网 08-26'),

    new NewsItemData('习言道|中国共产党始终', '中国新闻网 08-26'),

    new NewsItemData('习言道|中国共产党始终把统一战线摆在重要位置', '中国新闻网 08-26'),

  ]

  aboutToAppear(): void {

    getImageColor(ImageUrl, 10, 10).then(color => {

      this.baseColors.splice(2,1, [color, 1.0])

    })

    getImageColor(ImageUrl, 10, 100).then(color => {

      this.baseColorsCol2.splice(2,1, [color, 1.0])

    })

  }

  build() {

    Column() {

      Stack() {

        Row(){

          Column().width('50%').height('400').backgroundColor(Color.Red).linearGradient({

            angle: 180,

            colors: this.baseColors

          })

          Column().width('50%').height('400').backgroundColor(Color.Black).linearGradient({

            angle: 180,

            colors: this.baseColorsCol2

          })

        }

        Column() {

            this.NewsBuilder(this.newsItems)

          }.zIndex(2)

        .padding({left:5, right: 5})

      }

      this.SwiperBuilder(this.swiperItems)

    }

  }

  [@Builder](/user/Builder)

  NewsBuilder(items:NewsItemData[]) {

    Column(){

      ForEach(items, (item: NewsItemData) =>  {

        Column() {

          Text(item.title).fontSize(20).margin({bottom: 5})

          Text(item.from).fontSize(12).fontColor('#6a000000')

        }.margin({bottom: 10})

        .alignItems(HorizontalAlign.Start)

        .onClick(() => {

          promptAction.showDialog({message: '功能开发中'})

        })

      })

    }.margin({top: 30})

    .padding({left: 5, right:5, top: 10, bottom: 10})

    .width('100%')

    .alignItems(HorizontalAlign.Start)

    .backgroundColor(Color.White)

    .borderRadius(8)

  }

  [@Builder](/user/Builder)

  SwiperBuilder(items:SwiperItemData[]) {

    Row() {

      Swiper(this.swiperController) {

        ForEach(items,

          (item: SwiperItemData) => {

              Image(item.iconUrl).borderRadius('8vp').width('100%').onClick(() => {

                promptAction.showDialog({ message: '功能开发中' })

              })

                .overlay(this.textBuilder(item.content), {

                  align: Alignment.Bottom,

                  offset: { x: 10, y: -15 },

                })

          }, (item: SwiperItemData) => JSON.stringify(item))

      }

      .onChange((index: number) => {

        // 取色

        getImageColor(items[index].iconUrl, 10, 10).then(color => {

          console.log('#######result', color)

          this.baseColors.splice(2,1, [color, 1.0])

        });

        // 取色

        getImageColor(items[index].iconUrl, 600, 10).then(color => {

          console.log('#######result', color)

          this.baseColorsCol2.splice(2,1, [color, 1.0])

        });

      })

    }

  }

  [@Builder](/user/Builder)

  textBuilder(content: string) {

    Text(content).fontColor(Color.White)

      .fontSize(20)

  }

}

export class NewsItemData{

  title: string;

  from: string

  constructor(title: string, from: string) {

    this.title = title;

    this.from = from;

  }

}

export class SwiperItemData{

  iconUrl: string;

  content: string

  constructor(iconUrl: string, content: string) {

    this.iconUrl = iconUrl;

    this.content = content;

  }

}

// ImageUtils.ets

import http from '[@ohos](/user/ohos).net.http';

import ResponseCode from '[@ohos](/user/ohos).net.http';

import effectKit from '[@ohos](/user/ohos).effectKit';

import image from '[@ohos](/user/ohos).multimedia.image';

export const getImageColor = async (imageUrl: string, x: number, y: number): Promise<string> => {

  return new Promise(async (resolve, reject) => {

    const data: http.HttpResponse = await http.createHttp().request(imageUrl)

    let code: number = data.responseCode;

    if (ResponseCode.ResponseCode.OK === code) {

      let imageSource = image.createImageSource(data.result as string);

      console.time('get color time')

      const pixelMap: image.PixelMap = await imageSource.createPixelMap({desiredRegion: { size: { height: 1, width: 2 }, x, y }});

      effectKit.createColorPicker(pixelMap, (error, colorPicker) => {

        let result = colorPicker.getMainColorSync()

        let color = `#${result.alpha.toString(16)}${result.red.toString(16)}${result.green.toString(16)}${result.blue.toString(16)}`

        resolve(color)

      })

    }

  })

}