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

小黄要努力
发布于 2024-7-31 12:56
浏览
0收藏


需求背景

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

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

#HarmonyOS NEXT体验官#HarmoneyOS NEXT应用开发实战《仿tb搜索页面》-鸿蒙开发者社区

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

ArkTS:

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

ArkUI:

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


说干就干,DevEco-Studio 启动~~!

我将其拆分为三个模块

1搜索模块和搜索记录

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

很对!!

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

#HarmonyOS NEXT体验官#HarmoneyOS NEXT应用开发实战《仿tb搜索页面》-鸿蒙开发者社区

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

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

#HarmonyOS NEXT体验官#HarmoneyOS NEXT应用开发实战《仿tb搜索页面》-鸿蒙开发者社区

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)

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

接下来是搜索记录(效果如下)

#HarmonyOS NEXT体验官#HarmoneyOS NEXT应用开发实战《仿tb搜索页面》-鸿蒙开发者社区

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)

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

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

2猜你想要列表

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

#HarmonyOS NEXT体验官#HarmoneyOS NEXT应用开发实战《仿tb搜索页面》-鸿蒙开发者社区

代码如下

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})

3热搜推荐可切换列表

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

Tabs:头部效果

#HarmonyOS NEXT体验官#HarmoneyOS NEXT应用开发实战《仿tb搜索页面》-鸿蒙开发者社区

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

#HarmonyOS NEXT体验官#HarmoneyOS NEXT应用开发实战《仿tb搜索页面》-鸿蒙开发者社区

List:列表效果

#HarmonyOS NEXT体验官#HarmoneyOS NEXT应用开发实战《仿tb搜索页面》-鸿蒙开发者社区

代码实现如下:

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
        })

#HarmonyOS NEXT体验官#HarmoneyOS NEXT应用开发实战《仿tb搜索页面》-鸿蒙开发者社区

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

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
分类
标签
收藏
回复
举报
回复
    相关推荐