当前位置：首页 > article >正文

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

article 2025/8/25 23:32:37

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

搜索页的内容比较多，都有点密集恐惧症了，不过我们可以从上至下将它拆分开来，逐一击破。

导航栏

搜索页的的最顶部是导航栏，由返回按钮和搜索框两部分组成,比较简单，具体实现代码如下：

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语言##仓颉##购物#

查看全文

http://www.lryc.cn/news/2401587.html