鸿蒙仓颉语言开发实战教程：商城搜索页
大家好，今天要分享的是仓颉语言商城应用的搜索页。
搜索页的内容比较多，都有点密集恐惧症了，不过我们可以从上至下将它拆分开来，逐一击破。
导航栏
搜索页的的最顶部是导航栏，由返回按钮和搜索框两部分组成,比较简单，具体实现代码如下：
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语言##仓颉##购物#
#harmonyos#
