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 })
}
}<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>