#HarmonyOS NEXT体验官#HarmoneyOS NEXT应用开发实战《仿tb搜索页面》

需求背景

最近在做安卓版本的应用商城，大部分都不能用第三方库，做到搜索页面的时候，因为产品要求对标头部应用（猛抄头部应用），所以把淘宝搜索页面实现了一下，从页面到功能，各种组件的封装，用了快一天的时间才有个雏形，我就想如果是鸿蒙的话会如何呢....

话不多说直接看效果图，3 2 1 上链接

要想实现开发功能当然少不了对技术的了解，技术上的选择当然是使用鸿蒙官方推荐套件

ArkTS：

ArkTS是鸿蒙生态的应用开发语言。它在保持TypeScript（简称TS）基本语法风格的基础上，对TS的动态类型特性施加更严格的约束，引入静态类型。同时，提供了声明式UI、状态管理等相应的能力，让开发者可以以更简洁、更自然的方式开发高性能应用

ArkUI:

ArkUI是一套构建分布式应用界面的声明式UI开发框架。它使用极简的UI信息语法、丰富的UI组件、以及实时界面预览工具，帮助您提升HarmonyOS应用界面开发效率30%。您只需使用一套ArkTS API，就能在多个HarmonyOS设备上提供生动而流畅的用户界面体验

说干就干，DevEco-Studio 启动~~！

我将其拆分为三个模块

1搜索模块和搜索记录

搜索模块有一定开发经验的人会说不就是一Row容器加几个组件嘛，这有什么难的？

很对！！

但我们要做的是鸿蒙的高端玩法，自定义组件引用的方式来实现搜索模块，这样不仅可以多页面引用，还能让父组件代码更少，逻辑的维护在子组件自己的页面，开发效率更高，一个页面效率高百分之20，那一天开发下来，完成任务后起码能省出来半天时间！！！

让我们看一下搜索模块代码如何实现

搜索模块主要是文本，图片，输入框来构成代码如下(效果如图所示)

PS:图片资源可以自行下载矢量图标库

登录后复制

Row(){
          Image($r('app.media.iv_back'))
            .height(25)
            .width(25)
            .interpolation(ImageInterpolation.High)
            .margin({left:10,right:10})

          Row(){
            TextInput({text:this.value,controller:this.controller})
              .type(InputType.Password)
              .onChange((value:string)=>{
                this.value=value
              })
              .width(200)

            Image($r('app.media.xiangji'))
              .height(25)
              .width(25)
              .margin({left:10})

            Button("搜索")
              .width(60)
              .height(30)
              .fontSize(14)
              .backgroundColor("#fffc8345")
              .margin({left:10})

          }
          .width('100%')
          .layoutWeight(1)
          .borderRadius(25)
          .backgroundColor(Color.White)
        }
        .padding({top:15})
        .backgroundColor(Color.White)

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.
• 13.
• 14.
• 15.
• 16.
• 17.
• 18.
• 19.
• 20.
• 21.
• 22.
• 23.
• 24.
• 25.
• 26.
• 27.
• 28.
• 29.
• 30.
• 31.
• 32.
• 33.
• 34.
• 35.

通过row容器来对控件进行横向的空间分布，声明组件的同时，数据也已经添加上，真可谓轻松写意

接下来是搜索记录（效果如下）

登录后复制

Column(){

          Row(){
            Text("历史搜索")
              .fontSize(16)
              .fontWeight(FontWeight.Bold)

            Text("删除")
              .fontSize(12)
              .fontColor("#999999")
              .onClick(()=>{
                this.dialogController.open()
              })
          }
          .width('100%')
          .justifyContent(FlexAlign.SpaceBetween)
          .padding({left:10,right:10})
          .margin({top:15})


          Flex({wrap:FlexWrap.Wrap}){
            ForEach(this.txtList,(item:any,index:number)=>{
              Column(){
                Text(item.txt)
                  .backgroundColor("#80d7d2d2")
                  .fontSize(12)
                  .padding(5)
                  .margin({left:10,top:10})
                  .borderRadius(5)
              }
            })
          }
        }
        .visibility(this.txtList.length>0?Visibility.Visible:Visibility.Hidden)
        .backgroundColor(Color.White)

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.
• 13.
• 14.
• 15.
• 16.
• 17.
• 18.
• 19.
• 20.
• 21.
• 22.
• 23.
• 24.
• 25.
• 26.
• 27.
• 28.
• 29.
• 30.
• 31.
• 32.
• 33.
• 34.
• 35.

在其他系统中要实现一个搜索记录的布局，不知道要封装多少层，在鸿蒙中一个Flex足矣

小tips：弹性布局（ Flex）提供更加有效的方式对容器中的子元素进行排列、对齐和分配剩余空间。常用于页面头部导航栏的均匀分布、页面框架的搭建、多行数据的排列等。

2猜你想要列表

商品通过两列的列表推荐给用户，不多不少刚刚好或许有人会说这个功能用list 或者grid 就能实现，但是这个功能同样使用Flex即可实现，真是万能布局，强烈安利（效果如图）

代码如下

登录后复制

Column(){
          Row(){
            Text("猜你想要")
              .fontSize(16)
              .fontWeight(FontWeight.Bold)
              .margin({top:10})

            Text("隐藏")
              .fontSize(12)
              .fontColor("#999999")
              .onClick(()=>{
                if (this.isShow) {
                  this.isShow=false

                }else{
                  this.isShow=true

                }
              })
          }
          .width('100%')
          .justifyContent(FlexAlign.SpaceBetween)
          .padding({left:10,right:10})
          Flex({wrap:FlexWrap.Wrap}){
            ForEach(this.list,(item:any,index:number)=>{
              Text(item.txt)
                .width('40%')
                .fontSize(14)
                .fontColor("#999999")
                .margin({left:10,top:10})

            })
          }
          .visibility(this.isShow?Visibility.Visible:Visibility.None)
        }
        .margin({top:15})

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.
• 13.
• 14.
• 15.
• 16.
• 17.
• 18.
• 19.
• 20.
• 21.
• 22.
• 23.
• 24.
• 25.
• 26.
• 27.
• 28.
• 29.
• 30.
• 31.
• 32.
• 33.
• 34.
• 35.
• 36.

3热搜推荐可切换列表

这个模块看似简单，但是要使用的组件可不少，不过鸿蒙早已给我们封装好了组件和API，我们只需要使用 Tabs 和 List的结合就能实现，用时甚至跟上边简单的组件不相上下，真是大大的提高了生产力和生产效率，谁说不好用我跟谁急（效果如下图）

Tabs:头部效果

列表条目：我们还需要先设计好一条的效果，让列表去循环就好，一条效果如下

List：列表效果

代码实现如下：

登录后复制

Tabs(){
          TabContent(){

            List(){
              ForEach(this.hotList,(item:SearchBean,index:number)=>{
                ListItem(){
                  Row(){
                    Image(item.imgUrl)
                      .height(35)
                      .width(35)
                      .borderRadius(5)
                      .margin({left:10})
                    Column(){
                      Text(item.title)
                        .fontColor(Color.Black)
                        .fontSize(16)
                        .fontWeight(FontWeight.Bold)
                      if (item.msg=='') {

                      }else{
                        Text(item.msg)
                          .fontColor("#999999")
                          .fontSize(12)

                      }

                    }
                    .margin({left:10})

                    Blank()
                    Text("热度"+item.hotNumber+"万")
                      .fontSize(14)
                      .fontColor("#999999")
                      .margin({right:10})

                  }
                  .margin({top:10})
                  .justifyContent(FlexAlign.SpaceBetween)
                  .width('100%')
                }

              })
            }
            .height('100%')



          }.tabBar(this.TabBuilder(0,"淘宝热搜"))

          TabContent(){

          }.tabBar(this.TabBuilder(1,"小孩哥"))

          TabContent(){

          }.tabBar(this.TabBuilder(2,"明星同款"))
          TabContent(){

          }.tabBar(this.TabBuilder(3,"什么东西"))
        }
        .visibility(this.isShow1?Visibility.Visible:Visibility.None)
        .height(400)
        .onChange((index:number)=>{
          this.currentIndex=index
        })

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.
• 13.
• 14.
• 15.
• 16.
• 17.
• 18.
• 19.
• 20.
• 21.
• 22.
• 23.
• 24.
• 25.
• 26.
• 27.
• 28.
• 29.
• 30.
• 31.
• 32.
• 33.
• 34.
• 35.
• 36.
• 37.
• 38.
• 39.
• 40.
• 41.
• 42.
• 43.
• 44.
• 45.
• 46.
• 47.
• 48.
• 49.
• 50.
• 51.
• 52.
• 53.
• 54.
• 55.
• 56.
• 57.
• 58.
• 59.
• 60.
• 61.
• 62.
• 63.
• 64.
• 65.

短短几行代码就轻松实现我们想要的功能！

原创作者: u_16442033 转载于: https://blog.51cto.com/u_16442033/11609212