鸿蒙仓颉语言开发实战教程：商城搜索页

2025-06-05
山东
本文字数：2994 字
阅读完需：约 10 分钟

大家好，今天要分享的是仓颉语言商城应用的搜索页。

搜索页的内容比较多，都有点密集恐惧症了，不过我们可以从上至下将它拆分开来，逐一击破。导航栏搜索页的的最顶部是导航栏，由返回按钮和搜索框两部分组成,比较简单，具体实现代码如下：

Row(6){    Image(@r(app.media.back))    .width(30)    .height(30)    .onClick({evet => Router.back()})    Row{        Search(value: "", placeholder: "搜索商品")        .searchButton("搜索")         .width(100.percent)        .height(35)        .borderRadius(4)        .backgroundColor(0xDDDDDD)        .placeholderColor(0x000000)    }    .height(35)    .layoutWeight(1)    .backgroundColor(Color(236, 236, 236, alpha: 1.0))    .borderRadius(4)    .justifyContent(FlexAlign.SpaceBetween)}.padding( right: 10, left: 10).width(100.percent)

复制代码

历史搜索

大家应该可以看出来这个页面除了导航栏之外其余内容都在 List 组件里，而且猜你想搜、历史搜索这两个标题样式相同，所以可以使用 List 组件的 header 来实现：

@Builder func normalHead(text:String) {    Row{        Text(text)        .fontSize(15)        .backgroundColor(Color.WHITE)        .padding(10)        .fontWeight(FontWeight.Bold)    }    .width(100.percent)    .height(35)    .alignItems(VerticalAlign.Center)}

复制代码

做完标题之后再看历史搜索的内容，这种不规则的排列看起来比较难，其实使用 Flex 布局就可以轻松实现，然后仔细设置一个 Text 组件的字体、边框、间距等样式即可，其次大家还是需要继续熟悉仓颉语言中 LIst 组件的使用和 Foreach 的写法，具体实现代码如下：

@State var hisList:ArrayList<String> = ArrayList<String>(['毛巾','衬衫','男士牛仔裤','一次性塑料盆','可乐啊','茶壶','保温壶','指甲刀','polo衫','超级智能手机'])
ListItemGroup(ListItemGroupParams(header:{=>bind(this.normalHead,this)('历史搜索')})){    ListItem{        Flex(FlexParams(direction: FlexDirection.Row, wrap: FlexWrap.Wrap)){            ForEach(hisList, itemGeneratorFunc: {str:String,index:Int64 =>             Text(str)            .margin(left:5,top:5)            .padding(left:6,right:6,top:4,bottom:4)            .fontSize(12)            .fontColor(0x4a4a4a)            .border(width: Length(1, unitType: LengthType.vp), color: Color(216, 216, 216, alpha: 1.0 ), radius: Length(4, unitType: LengthType.vp), style: BorderStyle.Solid)                        })        }        .width(100.percent)        .padding( right: 10, left: 10)    }}

复制代码

猜你想搜

猜你想搜部分比历史搜索要简单一些，而且标题我们已经写过了，内容部分只要将每个 text 组件的宽度设置 50%就能实现两列的效果，实现代码如下：

@State var guessList:ArrayList<String> = ArrayList<String>(['水晶粽子','男士轻薄裤子','超好看Polo衫','超智能手机','超快洗衣机','茶壶','实木家具窗'])
ListItemGroup(ListItemGroupParams(header:{=>bind(this.normalHead,this)('猜你想搜')})){    ListItem{        Flex(FlexParams(direction: FlexDirection.Row, wrap: FlexWrap.Wrap)){            ForEach(hisList, itemGeneratorFunc: {str:String,index:Int64 =>                 Text(str)                 .margin(top:5)                 .fontSize(15)                 .fontColor(0x4a4a4a).width(50.percent)                        })        }        .width(100.percent)        .padding( right: 10, left: 10)    }}

复制代码

热搜

热搜部分是这个页面最难的内容了，它两个部分都可以滑动但又是不同的滑动方式，标题部分可以自由滑动，而内容列表左右滑动时是分页的，所以标题部分使用 Scroll 容器，内容部分使用 Swiper 容器，这两部分还有联动效果。

先看标题部分的具体代码，我依然把它视作 List 组件的 Head：

@Builder func hotHead(text:String) {     Scroll(this.scroller){        Row(30){            ForEach(this.hotTypeList, itemGeneratorFunc: {str:String,index:Int64 =>                        if(this.hotIndex == index){                             Text(str)                             .fontSize(15)                             .fontWeight(FontWeight.Bold)                             .fontColor(Color.RED)                        }else {                          Text(str)                            .fontSize(15)                             .fontColor(Color.GRAY)                        }                        		})        }    }    .height(45)    .padding( right: 12, left: 12)    .scrollable(ScrollDirection.Horizontal)    .scrollBar(BarState.Off)    }

复制代码

然后是热搜内容列表，这是我们第一次在仓颉语言中遇到 Swiper 容器，它有一些小小的坑，首先我暂时没找到隐藏控制圆点的属性，还有它代码控制翻页只支持上一页和下一页，无法通过按钮点击自由的翻页。所以这里我并没有给标题添加点击事件，只写了内容列表向标题列表的单向联动：

ListItemGroup(ListItemGroupParams(header:{=>bind(this.hotHead,this)('')})){    ListItem{        Swiper(swiperController){              ForEach(hotTypeList, itemGeneratorFunc: {str:String,index:Int64 =>                        Column{                             ForEach(hotContentList, itemGeneratorFunc: {str:String,index:Int64 =>                                    Row{                                        Row(10){                                         Text((index + 1).toString())                                         .fontWeight(FontWeight.Bold)                                         .fontSize(16)                                         .fontColor(Color.BLACK)                                        Text(str)                                         .fontSize(16)                                         .fontColor(Color.BLACK)                                         }                                                                            Text('热度100万')                                    .fontColor(Color.GRAY)                                    .fontSize(14)                                    }                                    .width(100.percent)                                     .height(48)                                .justifyContent(FlexAlign.SpaceBetween)                                    })                        }                        })        }        .padding( right: 12,  left: 12)        .onChange( {             index => this.hotIndex = Int64(index)     })    }}

复制代码

以上就是商城搜索页的相关内容。#HarmonyOS 语言 ##仓颉 ##购物 #

发布于: 刚刚阅读数: 2

原文链接:【http://xie.infoq.cn/article/2504ac84e315ff457afc8ac65】。未经作者许可，禁止转载。

幽蓝计划

关注

还未添加个人签名 2025-05-09 加入

还未添加个人简介

发布

暂无评论

创作场景

鸿蒙仓颉语言开发实战教程：商城搜索页

幽蓝计划

评论