HarmonyOS 鸿蒙Next 多条资讯自动上下滚动的跑马灯效果

1、用Stack组件堆叠Swiper和TextInput，让swiper在textInput中间显示 核心代码

Row() {

  Stack() {

    // 使用Stack堆叠Swiper和TextInput组件。

    Swiper() {

      // 使用ForEach组件循环搜索关键字数据

      ForEach(SearchText, (item: SearchTextModel) => {

        Text(item.searchText)

          .opacity(TEXT_OPACITY)

          .fontColor('#000000')

          .fontSize(14)

          .textAlign(TextAlign.Start)

          .width('100%')

      }, (item: SearchTextModel) => item.id.toString())

    }

    ...

    TextInput({ text: this.textData, controller: this.controller })

  }

  .width('80%')

  .height(100)

}

2、使用Swiper组件显示热搜关键字并自动切换，将swiper设置为纵向滑动.vertical(true)，通过判断输入框是否有内容来控制swiper的显示隐藏

核心代码

Swiper() {

  // 使用ForEach组件循环搜索关键字数据

  ForEach(SearchText, (item: SearchTextModel) => {

    Text(item.searchText)

      .opacity(TEXT_OPACITY)

      .fontColor('#000000')

      .fontSize(14)

      .textAlign(TextAlign.Start)

      .width('100%')

  }, (item: SearchTextModel) => item.id.toString())

}

.displayMode(SwiperDisplayMode.STRETCH)

// 根据搜索框是否有内容控制显示隐藏

.visibility(this.textData ? Visibility.Hidden : Visibility.Visible)

.loop(true)

// 通过状态变量控制是否自动轮播

.autoPlay(this.isAutoPlay)

// 垂直方向

.vertical(true)

// 去掉指示器

.indicator(false)

.interval(SWIPER_INTERVAL)

.margin(16)

.onChange((index) => {

  this.swiperIndex = index;

})

3、使用TextInput搜索框组件，根据搜索框是否处于编辑态控制Swiper组件开始和暂停滚动，设置搜索框最大行数为1，

TextInput({ text: this.textData, controller: this.controller })

  .onChange((data) => {

    this.textData = data;

  })

  .onEditChange((isEditing) => {

    // 通过判断编辑态控制Swiper组件开始和暂停滚动

    if (!isEditing) {

      this.isAutoPlay = true

    } else {

      this.isAutoPlay = false

    }

  })

  .maxLines(MAX_LINE)

  .width('100%')

  .height(40)
  

4、点击搜索按钮时，退出编辑状态，如果搜索框没有内容提交当前热搜词

Button('搜索')

  .layoutWeight(1)

  .margin({ left: 10 })

  .height(40)

  .onClick(() => {

    // 可选择在此时通过判断搜索框是否有内容来选择提交搜索框内容或当前热搜关键字。

    // 没有内容时提交当前热搜关键字

    if (!this.textData) {

      this.swiperText = SearchText[this.swiperIndex].searchText.toString();

    }

    // 退出编辑态

    this.controller.stopEditing()

  })
  

5、当输入框热搜词文字过长时，设置输入框右边内容显示区域渐显效果，主要是用blendMode图像效果，将当前控件的内容与下方画布已有内容进行混合。.blendMode(BlendMode.SRC_IN, BlendApplyType.OFFSCREEN)，SRC_IN只显示源像素中与目标像素重叠的部分，然后通过通用属性 linearGradient设置颜色渐变效果

// 使用Stack堆叠Swiper和TextInput组件。

Swiper() {

  // 使用ForEach组件循环搜索关键字数据

  ForEach(SearchText, (item: SearchTextModel) => {

    Row() {

      Text(item.searchText)

      ...

    }

    .blendMode(BlendMode.SRC_IN, BlendApplyType.OFFSCREEN)

    .backgroundColor(Color.Transparent)

  }, (item: SearchTextModel) => item.id.toString())

}

// 设置文字右端显隐

.linearGradient({

  angle: 90,

  colors: [['rgba(0, 0, 0, 0)', 0], ['rgba(0, 0, 0, 1)', 0], ['rgba(0, 0, 0, 1)', 0.85],

    ['rgba(0, 0, 0, 0)', 1]]

})

.blendMode(BlendMode.SRC_OVER, BlendApplyType.OFFSCREEN)