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

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

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

1. Row(6){
2.     Image(@r(app.media.back))
3.     .width(30)
4.     .height(30)
5.     .onClick({evet => Router.back()})
6.     Row{
7.         Search(value: "", placeholder: "搜索商品")
8.         .searchButton("搜索")
9.          .width(100.percent)
10.         .height(35)
11.         .borderRadius(4)
12.         .backgroundColor(0xDDDDDD)
13.         .placeholderColor(0x000000)
14.     }
15.     .height(35)
16.     .layoutWeight(1)
17.     .backgroundColor(Color(236, 236, 236, alpha: 1.0))
18.     .borderRadius(4)
19.     .justifyContent(FlexAlign.SpaceBetween)
20. }
21. .padding( right: 10, left: 10)
22. .width(100.percent)

复制代码

历史搜索

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

1. @Builder func normalHead(text:String) {
2.     Row{
3.         Text(text)
4.         .fontSize(15)
5.         .backgroundColor(Color.WHITE)
6.         .padding(10)
7.         .fontWeight(FontWeight.Bold)
8.     }
9.     .width(100.percent)
10.     .height(35)
11.     .alignItems(VerticalAlign.Center)
12. }

复制代码

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

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

复制代码

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

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

复制代码

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

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

1. @Builder func hotHead(text:String) {
2.      Scroll(this.scroller){
3.         Row(30){
4.             ForEach(this.hotTypeList, itemGeneratorFunc: {str:String,index:Int64 =>
5.                         if(this.hotIndex == index){
6.                              Text(str)
7.                              .fontSize(15)
8.                              .fontWeight(FontWeight.Bold)
9.                              .fontColor(Color.RED)
10.                         }else {
11.                           Text(str)
12.                             .fontSize(15)
13.                              .fontColor(Color.GRAY)
14.                         }
15.                         
16.                 })
17.         }
18.     }
19.     .height(45)
20.     .padding( right: 12, left: 12)
21.     .scrollable(ScrollDirection.Horizontal)
22.     .scrollBar(BarState.Off)
23.    
24. }

复制代码

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

1. ListItemGroup(ListItemGroupParams(header:{=>bind(this.hotHead,this)('')})){
2.     ListItem{
3.         Swiper(swiperController){
4.               ForEach(hotTypeList, itemGeneratorFunc: {str:String,index:Int64 =>
5.                         Column{
6.                              ForEach(hotContentList, itemGeneratorFunc: {str:String,index:Int64 =>
7.                                     Row{
8.                                         Row(10){
9.                                          Text((index + 1).toString())
10.                                          .fontWeight(FontWeight.Bold)
11.                                          .fontSize(16)
12.                                          .fontColor(Color.BLACK)
13.                                         Text(str)
14.                                          .fontSize(16)
15.                                          .fontColor(Color.BLACK)
16.                                          }
17.                                     
18.                                         Text('热度100万')
19.                                     .fontColor(Color.GRAY)
20.                                     .fontSize(14)
21.                                     }
22.                                     .width(100.percent)
23.                                      .height(48)
24.                                 .justifyContent(FlexAlign.SpaceBetween)
25.                                     })
26.                         }
27.                         })
28.         }
29.         .padding( right: 12,  left: 12)
30.         .onChange( {
31.              index => this.hotIndex = Int64(index)
32.      })
33.     }
34. }

复制代码

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

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！