【HarmonyOS NEXT】如何实现搜索提示词上下滚动轮播，类似Android的ViewFlipper组件效果

 【关键字】

搜索 / 提示词 / 滚动轮播 / ViewFlipper

【问题描述】

关于实现搜索提示词上下滚动轮播的业务场景，有类似于Android中ViewFlipper这样的组件吗？

【解决方案】

基于实现搜索提示词上下滚动轮播的业务场景，示例代码如下：

@Entry
@Component
struct TextInputTest {
  private swiperController: SwiperController = new SwiperController();
  private controller: TextInputController = new TextInputController()
  private textArr: String[] = ["早起晨练", "准备早餐", "阅读名著", "学习ArkTS", "看剧放松"]
  @State shuRu: boolean = false;
  @State text: string = '';

  build() {
    Column({ space: 5 }) {
      Stack() {
        TextInput({ text: $$this.text, placeholder: '', controller: this.controller })
          .onChange((value: string) => {
            this.shuRu = true;
            if (value === '') {
              this.shuRu = false;
            }
          })
          .border({ width: 1 })
          .width('100%')
          .height(50)
          .zIndex(1)
        Swiper(this.swiperController) {
          ForEach(this.textArr, (item: string) => {
            Text(item.toString())
              .width('100%')
              .height(160)
              .backgroundColor('#00000000')
              .textAlign(TextAlign.Center)
              .fontSize(30)
              .fontWeight(2)
              .fontColor(Color.Gray)
          }, (item: string) => item)
        }
        .cachedCount(2)
        .index(0)
        .autoPlay(true)
        .interval(4000)
        .loop(true)
        .duration(1000)
        .itemSpace(0)
        .curve(Curve.Linear)
        .indicator(false)
        .vertical(true)
        .width('100%')
        .height(50)
        .visibility(this.shuRu ? Visibility.Hidden : Visibility.Visible)
      }
    }.width('100%').margin({ top: 5 })
  }
}