鸿蒙HarmonyOS开发：Scroll组件结合属性动画实现导航背景色切换效果

class ArticleItem {
  id: number;
  title: string;
  img: ResourceStr;
  author: string;
  date: string;

  constructor(id: number, title: string, img: ResourceStr, author: string, date: string) {
    this.id = id
    this.title = title
    this.img = img
    this.author = author
    this.date = date
  }
}


@Entry
@Component
struct Index {
  scroller: Scroller = new Scroller()
  @State scrollerFlag: boolean = false
  @State swiperImages: ResourceStr[] = [$r("app.media.background"), $r("app.media.background"), $r("app.media.background"), $r("app.media.background")]
  @State articleList: ArticleItem[] = [
    new ArticleItem(1, "嫦娥六号探测器进入环月轨道飞行", "https://p5.img.cctvpic.com/photoworkspace/contentimg/2024/05/08/2024050820144382684.jpg", "央视网", "2014-05-08"),
    new ArticleItem(2, "“五一”假期游处处火爆 有哪些文旅新潮流？", "https://cms-emer-res.cctvnews.cctv.com/image/1005/upload/17292d188bc64cef882f1cd07d3d2acc.jpeg", "央视新闻客户端", "2024-05-08"),
    new ArticleItem(3, "杭州：全面取消住房限购，购房即可申请落户", $r("app.media.background"), "界面新闻", "2024-05-09"),
    new ArticleItem(4, "时隔五年，合肥或将再次引进“国宝”大熊猫", "https://pics4.baidu.com/feed/d50735fae6cd7b899b1d7bef7ec7b8aad8330e5d.jpeg@f_auto?token=e70fa976dceb8e88433c493f7e86b88c", "九派新闻", "2024-05-08"),
    new ArticleItem(5, "发布擦边广告再被罚，椰树集团徘徊在“土味”和“低俗”之间？", "https://pics1.baidu.com/feed/e824b899a9014c083cd8d85d067bf9057af4f471.jpeg@f_auto?token=c6770b5d0d99a68721fc88e7a337d01c", "北京商报", "2024-05-08"),
    new ArticleItem(6, "特斯拉在华推进全自动驾驶 智能网联车产业链迎新机遇", $r("app.media.background"), "每日经济新闻", "2024-05-09"),
    new ArticleItem(7, "嫦娥六号探测器进入环月轨道飞行", "https://p5.img.cctvpic.com/photoworkspace/contentimg/2024/05/08/2024050820144382684.jpg", "央视网", "2014-05-08"),
    new ArticleItem(8, "“五一”假期游处处火爆 有哪些文旅新潮流？", "https://cms-emer-res.cctvnews.cctv.com/image/1005/upload/17292d188bc64cef882f1cd07d3d2acc.jpeg", "央视新闻客户端", "2024-05-08"),
    new ArticleItem(9, "杭州：全面取消住房限购，购房即可申请落户", $r("app.media.background"), "界面新闻", "2024-05-09"),
    new ArticleItem(10, "时隔五年，合肥或将再次引进“国宝”大熊猫", "https://pics4.baidu.com/feed/d50735fae6cd7b899b1d7bef7ec7b8aad8330e5d.jpeg@f_auto?token=e70fa976dceb8e88433c493f7e86b88c", "九派新闻", "2024-05-08"),
    new ArticleItem(11, "发布擦边广告再被罚，椰树集团徘徊在“土味”和“低俗”之间？", "https://pics1.baidu.com/feed/e824b899a9014c083cd8d85d067bf9057af4f471.jpeg@f_auto?token=c6770b5d0d99a68721fc88e7a337d01c", "北京商报", "2024-05-08"),
    new ArticleItem(12, "特斯拉在华推进全自动驾驶 智能网联车产业链迎新机遇", $r("app.media.background"), "每日经济新闻", "2024-05-09"),
  ]

  // 自定义构建函数
  @Builder headerSwiper() {
    Swiper() {
      ForEach(this.swiperImages, (item: ResourceStr) => {
        Image(item)
          .width("100%")
          .objectFit(ImageFit.Cover)
      })
    }
    .autoPlay(true)
    .height(260)
    .indicatorStyle({
      color: '#ffffff'
    })
  }

  // 自定义构建函数
  @Builder topBar() {
    Row() {
      Row() {
        Image($r("app.media.background"))
          .width(44)
          .height(44)
      }
      .height("100%")
      .width(60)

      Row() {
        Text("图片新闻")
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
          .textAlign(TextAlign.Center)
          .width("100%")
          .fontColor(0xffffff)
      }
      .layoutWeight(1)
      .height("100%")

      Row() {
        Image($r("app.media.background"))
          .width(28)
          .height(28)
      }
      .width(60)
      .height("100%")
      .justifyContent(FlexAlign.Center)
    }
    .height(60)
    .width("100%")
    .backgroundColor(this.scrollerFlag ? Color.Green : Color.Transparent)
    .animation({ duration: 500 })
  }

  // 自定义构建函数
  @Builder newsItem(item: ArticleItem) {
    Row() {
      Column() {
        Text(item.title)
          .fontSize(16)
          .fontWeight(FontWeight.Bold)
          .maxLines(2)
          .textOverflow({ overflow: TextOverflow.Ellipsis })
        Text(`${item.author} ${item.date}`)
          .fontSize(14)
      }
      .layoutWeight(1)
      .alignItems(HorizontalAlign.Start)
      .height(68)
      .justifyContent(FlexAlign.SpaceBetween)

      Image(item.img)
        .width(100)
        .height(68)
        .margin({ left: 8 })
        .borderRadius(2)
        .objectFit(ImageFit.Cover)
    }
    .width('100%')
    .height(80)
    .padding(10)
  }

  build() {
    Column() {
      Stack({ alignContent: Alignment.TopStart }) {
        Scroll(this.scroller) {
          Column({ space: 20 }) {
            this.headerSwiper()

            ForEach(this.articleList, (item: ArticleItem) => {
              this.newsItem(item)
            })
          }
          .justifyContent(FlexAlign.Start)
          .alignItems(HorizontalAlign.Start)
        }
        .onScroll((xOffset: number, yOffset: number) => {
          if (this.scroller.currentOffset().yOffset >= 174) {
            this.scrollerFlag = true
          } else {
            this.scrollerFlag = false
          }
        }) 
        this.topBar()
      }
    }
    .width('100%')
    .height('100%')
  }
}