鸿蒙开发5.0【TextInput的常见自定义效果】 解决方案

场景描述

输入框一般用于来承载用户的信息录入，常用于搜索框、表单、对话框等场景。

场景一：TextInput实现输入框热搜词自动滚动及文字内容颜色渐变

输入框未获焦时热搜词自动滚动，输入框获焦时输入框热搜词暂停滚动，热搜词文字到输入框右侧时文字内容会渐变显示。

方案

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

Row() {
  Stack() {
    // 使用Stack堆叠Swiper和TextInput组件。
    Swiper() {
      // 使用ForEach组件循环搜索关键字数据
      ForEach(SEARCH_TEXT, (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(SEARCH_TEXT, (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%')