回复
#HarmonyOS NEXT体验官#HarmoneyOS NEXT应用开发实战《仿tb搜索页面》 原创
小黄要努力
发布于 2024-7-31 12:56
浏览
0收藏
需求背景
最近在做安卓版本的应用商城，大部分都不能用第三方库，做到搜索页面的时候，因为产品要求对标头部应用（猛抄头部应用），所以把淘宝搜索页面实现了一下，从页面到功能，各种组件的封装，用了快一天的时间才有个雏形，我就想如果是鸿蒙的话会如何呢....
话不多说直接看效果图，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)通过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)在其他系统中要实现一个搜索记录的布局，不知道要封装多少层，在鸿蒙中一个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})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
})
短短几行代码就轻松实现我们想要的功能！
©著作权归作者所有，如需转载，请注明出处，否则将追究法律责任
分类
标签
赞
收藏
回复
相关推荐
