OpenHarmony实战开发-搜索框与文字轮播的巧用

背景介绍

一般情况下，许多应用的搜索框在无输入时的提示文本为“请输入文字”、“请输入”等等，现在为了进行引流以及流量推送，将热搜词条通过轮播的方式在“假搜索框”进行循环播放。本例即为大家这类场景的开发。

效果呈现

运行环境

本例基于以下环境开发，开发者也可以基于其他适配的版本进行开发：

• IDE: DevEco Studio 4.0 Release
• SDK: Ohos_sdk_public 4.0.10.13 (APIVersion 10 Release)

实现思路

本例包含的关键操作及其实现方案：

• 构建假搜索框与文字轮播列表：假搜索框是由一个搜索图标和文字列表轮播构成放置于Row组件中。
• 点击假搜索框进入真正的搜索框，并将当时点击时所显示的文字作为真正搜索框的提示文本进行搜索。

开发步骤

1.建立假的搜索框：通过搜索图标与纵向文字轮播组成。具体代码块如下：

...
Row(){
  Image($r('app.media.ic_public_search_filled'))
    .objectFit(ImageFit.Contain)
    .width(20)
    .aspectRatio(1)
    .margin({left:15})
  Swiper(){
    ForEach(arr,(item:SearchTextModel)=>{
      Column(){
        Text(item.searchText)
          .opacity(0.6)
          .fontSize(14)
          .fontColor(Color.Gray)
      }.width('100%').alignItems(HorizontalAlign.Start)
    },(item:SearchTextModel)=>item.id.toString())
  }
  ...
  .loop(true).autoPlay(true).vertical(true).interval(3000).margin(12).indicator(false)
}.zIndex(2).width('100%').justifyContent(FlexAlign.Start).margin({left:12,right:12})
  ...

2.点击假搜索框时所展示的文字传递到真正的搜索框并将其作为真正搜索框的提示文本：由于onChange()只有在轮播切换时才会触发回调并获取轮播文字，因此通过点击事件将获取文字传递进入真正的搜索框页面。具体代码块如下：

.onChange((index:number)=>{
  this.ind = arr[index].searchText
  console.info('foo change'+JSON.stringify(this.ind))
})
...
.onClick(()=>{
  router.pushUrl({url:'pages/Next',params:{data:this.ind}})
})

3.进入到真正的搜索框界面：通过router.getParams()获取发起跳转的页面往当前页面传入的数据。具体代码块如下:

aboutToAppear(){
  let params:Params_Type = router.getParams() as Params_Type;
  this.par=params.data
  console.log('foo'+ JSON.stringify(router.getParams()));
}
... 
Search({placeholder:this.par ,controller:this.controller})
  .searchButton("搜索")
  .placeholderColor(this.color)
  .width("85%")
  .height(40)
  .onSubmit((value:string)=>{
    this.submitValue=value
  })

完整代码

完整示例代码如下：

// Content.ets
export class SearchTextModel{
  id:number
  searchText:Resource

  constructor(id:number,searchText:Resource) {
    this.id = id
    this.searchText =searchText
  }
}
export class Topic_DATA{
  id:number= 0
  searchText:Resource|undefined =undefined
}
export const arr :Topic_DATA[]=[
  {id:0,searchText:$r('app.string.topic1')},
  {id:1,searchText:$r('app.string.topic2')},
  {id:2,searchText:$r('app.string.topic3')}
]
export class Params_Type{
  data:Resource|undefined =undefined
}

...

// Index.ets
import router from '@ohos.router';
import {SearchTextModel,arr} from '../common/constants/Constants'

@Entry
@Component
struct SearchComponent {
  @State isStop:boolean =true 
  @State ind:Resource|undefined=undefined

  build() {
    Column() {
      Row(){
        Image($r('app.media.ic_public_search_filled'))
          .objectFit(ImageFit.Contain)
          .width(20)
          .aspectRatio(1)
          .margin({left:15})
        Swiper(){
          ForEach(arr,(item:SearchTextModel)=>{
            Column(){
              Text(item.searchText)
                .opacity(0.6)
                .fontSize(14)
                .fontColor(Color.Gray)
            }.width('100%').alignItems(HorizontalAlign.Start)
          },(item:SearchTextModel)=>item.id.toString())
        }
        .onChange((index:number)=>{
          this.ind = arr[index].searchText
          console.info('foo change'+JSON.stringify(this.ind))
        })
        .loop(true).autoPlay(true).vertical(true).interval(3000).margin(12).indicator(false)

      }.zIndex(2).width('100%').justifyContent(FlexAlign.Start).margin({left:12,right:12})
      .onClick(()=>{
        router.pushUrl({url:'pages/Next',params:{data:this.ind}})
      })
    }.backgroundColor(Color.White).border({width:2,color:Color.Black,radius:40}).margin({top:15})
  }
}

...

// Next.ets
import router from '@ohos.router';
import {Params_Type} from '../common/constants/Constants';

@Entry
@Component
struct SearchExample {
  controller:SearchController = new SearchController()
  @State submitValue:string="";
  @State par :Resource|undefined = undefined
  private color = Color.Gray

  aboutToAppear(){
    let params:Params_Type = router.getParams() as Params_Type;
    this.par=params.data
    console.log('foo'+ JSON.stringify(router.getParams()));
  }
  build() {
    Column(){
      Row(){
        Image($r('app.media.ic_public_back'))
          .width('10%')
          .height(35).margin({left:10})
          .onClick(()=>{
            router.back()
          })

        Search({placeholder:this.par ,controller:this.controller})
          .searchButton("搜索")
          .placeholderColor(this.color)
          .width("85%")
          .height(40)
          .onSubmit((value:string)=>{
            this.submitValue=value
          })
      }
    }.margin({top:15})
  }
}

我这边特意整理了《鸿蒙语法ArkTS、TypeScript、ArkUI、实战开发视频教程》以及《鸿蒙生态应用开发白皮书V2.0PDF》《鸿蒙开发学习手册》（共计890页）鸿蒙开发资料等…希望对大家有所帮助：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

鸿蒙语法ArkTS、TypeScript、ArkUI等…视频教程：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

OpenHarmony APP开发教程步骤：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

鸿蒙生态应用开发白皮书V2.0PDF：https://docs.qq.com/doc/DZVVkRGRUd3pHSnFG

应用开发中级就业技术：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

应用开发中高级就业技术：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

南北双向高工技能基础：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

全网首发-工业级 南向设备开发就业技术：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

《鸿蒙开发学习手册》：

如何快速入门：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.基本概念
2.构建第一个ArkTS应用
3.……

开发基础知识：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.应用基础知识
2.配置文件
3.应用数据管理
4.应用安全管理
5.应用隐私保护
6.三方应用调用管控机制
7.资源分类与访问
8.学习ArkTS语言
9.……

基于ArkTS 开发：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.Ability开发
2.UI开发
3.公共事件与通知
4.窗口管理
5.媒体
6.安全
7.网络与链接
8.电话服务
9.数据管理
10.后台任务(Background Task)管理
11.设备管理
12.设备使用信息统计
13.DFX
14.国际化开发
15.折叠屏系列
16.……