Hello everyone, today I'm going to share the search page of the Cangjie Language Mall application.
There is quite a lot of content on the search page, and it's a bit overwhelming. However, we can break it down from top to bottom and tackle it one by one.
Navigation bar
The top of the search page is the navigation bar, which consists of two parts: the back button and the search box. It is relatively simple. The specific implementation code is as follows:
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)
Historical search
Everyone should be able to see that except for the navigation bar, all the other content on this page is in the List component. Moreover, the title styles of "Guess What You Want to Search" and "History Search" are the same, so the header of the List component can be used to achieve this:
@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)
}
After completing the title, when looking at the historical search content, this irregular arrangement seems rather difficult. In fact, it can be easily achieved with the Flex layout. Then, carefully set the font, border, spacing and other styles of a Text component. Secondly, everyone still needs to continue to be familiar with the use of the LIst component and the writing method of Foreach in the Cangjie language. The specific implementation code is as follows:
@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)
}
}
Guess you want to search
The part you guess you want to search is a bit simpler than the historical search. Moreover, we have already written the title. For the content part, just set the width of each text component by 50% to achieve the effect of two columns. The implementation code is as follows:
@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)
}
}
Hot search
The hot search section is the most challenging part of this page. Both sections can be swiped, but in different ways. The title section can be swiped freely, while the content list is paginated when swiped left and right. Therefore, the title section uses the Scroll container, and the content section uses the Swiper container. These two sections also have an interactive effect.
First, let's look at the specific code in the title part. I still regard it as the Head of the List component:
@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)
}
Then there is the list of hot search contents. This is the first time we have encountered the Swiper container in the Cangjie language. It has some minor pitfalls. Firstly, I couldn't find the property of the hidden control dot for the time being. Also, its code control for page turning only supports the previous page and the next page, and it is impossible to freely turn pages by clicking buttons. So here I didn't add click events to the title. I only wrote the one-way linkage from the content list to the title list:
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)
})
}
}
The above is all the relevant content of the mall search page. #HarmonyOS Language ## Cangjie ## Shopping #
Top comments (0)