HarmonyOS 开发实践 —— 基于TextInput的常见自定义效果解决方案

---

📚往期学习笔录📝：

📝 鸿蒙（HarmonyOS）北向开发知识点记录~
📝 鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~
📝 鸿蒙应用开发与鸿蒙系统开发哪个更有前景？
📝 嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~
📝 对于大前端开发来说，转鸿蒙开发究竟是福还是祸？
📝 鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？
📝 记录一场鸿蒙开发岗位面试经历~
📝 持续更新中……

---

场景描述

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

场景一： 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()