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

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

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

导航栏

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

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