HarmonyOS 鸿蒙Next 玩转HarmonyOS（二） 首页《搜索页面UI实现》

     这一小节我们来实现搜索页相关的功能，搜索功能在任何一个app中都是不可或缺的，一个完整的搜索功能可以帮助用户节省大量的时间，从而精准的搜索到想要的内容，今天我们就来实现一下搜索功能

开发准备

     · 搜索页的实现我们只需要在首页点击标题栏搜索按钮的时候跳转到我们创建的搜索页面，然后展示页面。当然我们在搜索页面需要监听文本输入的内容根据内容来请求接口搜索，同时我们需要有热门搜索、搜索历史的模块。

     · 搜索页面我们需要有一个对输入框的监听，从而实现点击搜索跳转页面请求接口获取内容，热门搜索我们可以使用list grid 等来实现，当然了这里推荐使用flex容器，因为它针对这种布局非常的方便且高效。

     · 搜索历史我们选用list布局来实现同时，实现清空列表的功能

代码实现

首先实现一个带返回 搜索框   搜索按钮的头部布局

 @State text: string = ‘’
  controller: TextInputController = new TextInputController()
  build() {
    Column(){
      Row(){
        Image($r(‘app.media.back’))
          .height(25)
          .width(25)

        TextInput({ text: this.text, placeholder: ‘发现更多干货’, controller: this.controller })
          .placeholderColor(Color.White)
          .placeholderFont({ size: 16, weight: 400 })
          .caretColor(Color.White)
          .width(200)
          .fontSize(16)
          .fontColor(Color.White)
          .onChange((value: string) => {
            this.text = value
          })
        Text(“搜索”)
          .fontSize(16)
          .fontColor("#1296db")
          .backgroundColor(Color.White)
          .padding({left:13,right:13,top:5,bottom:5})
          .borderRadius(10)
          .onClick(()=>{
            if (this.text.trim()==’’) {
showToast(“搜索内容不能为空”)
            }else {
              showToast(this.text)
            }
          })

      }
      .justifyContent(FlexAlign.SpaceBetween)
      .width(‘100%’)
      .padding({top:10,bottom:10,left:15,right:15})
      .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])
      .backgroundColor("#1296db")
    }
  }

现在我们实现了一个带返回按钮，输入框，搜索按钮的搜索页头部布局，实现效果如下

接下来我们实现静态的热门搜索列表和搜索历史

热门搜索，我们采用flex容器，根据lab按钮的长短来自行计算布局

我们先使用假数据做支撑

Flex({wrap:FlexWrap.Wrap}){
  ForEach(this.txt,(item:string,index:number)=>{
    Text(item)
      .backgroundColor("#ffe7e5e5")
      .fontColor(this.generateRandomRGBColor())
      .fontSize(16)
      .padding(10)
      .margin({top:10,left:10})
      .borderRadius(5)

  })
}

搜索历史同样的实现

Row(){
  Text(“搜索历史”)
    .fontSize(18)
    .fontColor("#ff25e0f8")

  Text(“清空”)
    .fontSize(18)
    .fontColor("#ff989b9b")
    .onClick(()=>{
      
    })
}
.width(‘100%’)
.justifyContent(FlexAlign.SpaceBetween)
.padding({left:15,right:15})
.margin({top:30})
List(){
  ForEach(this.txtList,(item:string)=>{
    ListItem(){
      Text(item)
        .fontColor("#ffa09a9a")
        .padding({left:15})
        .margin({top:10})
    }

  })
}

//生成随机的rgb 颜色
   generateRandomRGBColor(minBrightness: number = 5): string {
  const r = Math.floor(Math.random() * (256 - minBrightness)) + minBrightness;
  const g = Math.floor(Math.random() * (256 - minBrightness)) + minBrightness;
  const b = Math.floor(Math.random() * (256 - minBrightness)) + minBrightness;
  return rgb(${r},${g},${b});
}

现在我们的ui页面就实现完成了，执行后如下所示

完整代码：

import showToast from ‘./utils/ToastUtils’

@Entry
@Component
struct SearchPage {
  @State text: string = ‘’
  controller: TextInputController = new TextInputController()
  @State txt:string[]=[‘123’,‘123123’,‘123123’,‘112’,‘123’,‘123123’,‘123123’,‘12312344’]
  @State txtList:string[]=[‘123’,‘123123’,‘123123’,‘112’,‘123’,‘123123’,‘123123’,‘12312344’]

  build() {
    Column(){
      Row(){
        Image($r(‘app.media.back’))
          .height(25)
          .width(25)

        TextInput({ text: this.text, placeholder: ‘发现更多干货’, controller: this.controller })
          .placeholderColor(Color.White)
          .placeholderFont({ size: 16, weight: 400 })
          .caretColor(Color.White)
          .width(200)
          .fontSize(16)
          .fontColor(Color.White)
          .onChange((value: string) => {
            this.text = value
          })
        Text(“搜索”)
          .fontSize(16)
          .fontColor("#1296db")
          .backgroundColor(Color.White)
          .padding({left:13,right:13,top:5,bottom:5})
          .borderRadius(10)
          .onClick(()=>{
            if (this.text.trim()==’’) {
showToast(“搜索内容不能为空”)
            }else {
              showToast(this.text)
            }
          })

      }
      .justifyContent(FlexAlign.SpaceBetween)
      .width(‘100%’)
      .padding({top:10,bottom:10,left:15,right:15})
      .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])
      .backgroundColor("#1296db")
      Text(“热门搜索”)
        .width(‘100%’)
        .fontSize(18)
        .fontColor("#ff25e0f8")
        .padding({left:15,top:15})

      Flex({wrap:FlexWrap.Wrap}){
        ForEach(this.txt,(item:string,index:number)=>{
          Text(item)
            .backgroundColor("#ffe7e5e5")
            .fontColor(this.generateRandomRGBColor())
            .fontSize(16)
            .padding(10)
            .margin({top:10,left:10})
            .borderRadius(5)

        })
      }

      Row(){
        Text(“搜索历史”)
          .fontSize(18)
          .fontColor("#ff25e0f8")

        Text(“清空”)
          .fontSize(18)
          .fontColor("#ff989b9b")
          .onClick(()=>{
            
          })
      }
      .width(‘100%’)
      .justifyContent(FlexAlign.SpaceBetween)
      .padding({left:15,right:15})
      .margin({top:30})
      List(){
        ForEach(this.txtList,(item:string)=>{
          ListItem(){
            Text(item)
              .fontColor("#ffa09a9a")
              .padding({left:15})
              .margin({top:10})
          }

        })
      }

    }


  }
   generateRandomRGBColor(minBrightness: number = 5): string {
  const r = Math.floor(Math.random() * (256 - minBrightness)) + minBrightness;
  const g = Math.floor(Math.random() * (256 - minBrightness)) + minBrightness;
  const b = Math.floor(Math.random() * (256 - minBrightness)) + minBrightness;
  return rgb(${r},${g},${b});
}
}