Hello everyone, You LAN Jun is here again to share the Cangjie development tutorial. Today's content is the store detail page:
The content of this page seems simple, but in fact, there are many small details to pay attention to. The main purpose is to familiarize everyone with the use of the List container.
The entire page is composed of two major parts: the navigation bar and the List container. We have shared the navigation bar many times before, so we won't elaborate on it today. Let's mainly talk about the List part.
The first thing to note is how to make the List fill the remaining screen when there is a custom navigation bar. You can set the layoutWeight property:
List{
}
.width(100.percent)
.layoutWeight(1)
.backgroundColor(Color(247, 247, 247, alpha: 1.0))
In the List container, most of the content can be directly implemented using ListItem. However, for the store introduction and opening time sections, ListItemGroup may be needed. Here, it should be noted that when using ListItemGroup, the parameter ListItemGroupParams needs to be passed in. The content here mainly consists of header and footer styles, but they can be left blank:
ListItemGroup(ListItemGroupParams()){}
In addition, the following several items have rounded corners. However, Cangjie provides a very flexible way to set rounded corners. You can directly write a number in the borderRadius property to represent the curvature of each rounded corner:
.borderRadius(8)
You can also set the radian of each corner one by one. However, at this time, you cannot directly write numbers. Here, for the Length type, the unit needs to be included:
.borderRadius(bottomLeft: 8.vp, bottomRight: 8.vp,topLeft: 8.vp, topRight: 8.vp)
The above are the points to note on this page. Below is the complete code for this page:
import ohos.base.*
import ohos.component.*
import ohos.state_manage.*
import ohos.state_macro_manage.*
import ohos.router.Router
import cj_res_entry.app
@Entry
@Component
public class shoppage {
func build() {
Column {
Stack {
Text('店铺详情')
.fontSize(16)
.fontWeight(FontWeight.Bold)
.fontColor(Color.BLACK)
Row{
Image(@r(app.media.back))
.width(27)
.height(27)
.onClick({evet => Router.back()})
}.width(100.percent).justifyContent(FlexAlign.Start).padding(left:5)
}
.width(100.percent)
.height(60)
.backgroundColor(Color.WHITE)
List(space:10){
ListItem{
Column{
Text('商城')
.fontSize(22)
.fontWeight(FontWeight.Bold)
.fontColor(Color.WHITE)
.width(50)
.height(50)
.backgroundColor(Color.RED)
.textAlign(TextAlign.Center)
.borderRadius(8)
Text('幽蓝计划旗舰店')
.fontSize(15)
.fontColor(Color.BLACK)
.fontWeight(FontWeight.Bold)
.margin(top:5)
Column{
Text('已关注')
.fontSize(13)
.fontColor(Color.GRAY)
Text('11万人关注')
.fontSize(12)
.fontColor(Color.GRAY)
}
.width(110)
.height(40)
.margin(top:30)
.alignItems(HorizontalAlign.Center)
.justifyContent(FlexAlign.Center)
.border(width: Length(0.5, unitType: LengthType.vp), color: Color(216, 216, 216, alpha: 1.0), radius: Length(20, unitType: LengthType.vp), style: BorderStyle.Solid)
}
.width(100.percent)
.alignItems(HorizontalAlign.Center)
.backgroundColor(Color.WHITE)
.padding(bottom:10)
}
ListItem{
Row{
Text('店铺二维码')
.fontColor(Color.BLACK)
.fontSize(15)
.fontWeight(FontWeight.Bold)
Image(@r(app.media.chaofu))
.width(22)
.height(22)
}
.alignItems(VerticalAlign.Center)
.justifyContent(FlexAlign.SpaceBetween)
.width(100.percent)
.height(38)
.borderRadius(8)
.padding(left:10,right:10)
.backgroundColor(Color.WHITE)
}
.padding(left:10,right:10)
ListItemGroup(ListItemGroupParams()){
ListItem{
Row{
Text('店铺简介')
.fontColor(Color.BLACK)
.fontSize(15)
.fontWeight(FontWeight.Bold)
Text('潮服/运配/男女服饰')
.fontColor(Color.GRAY)
.fontSize(15)
.margin(left:10)
}
.alignItems(VerticalAlign.Center)
.width(100.percent)
.height(38)
.padding(left:10,right:10)
}
.backgroundColor(Color.WHITE)
.borderRadius(topLeft: 8.vp, topRight: 8.vp)
ListItem{
Row{
Text('开店时间')
.fontColor(Color.BLACK)
.fontSize(15)
.fontWeight(FontWeight.Bold)
Text('2025-05-05')
.fontColor(Color.GRAY)
.fontSize(15)
.margin(left:10)
}
.alignItems(VerticalAlign.Center)
.width(100.percent)
.height(38)
.padding(left:10,right:10)
}
.backgroundColor(Color.WHITE)
.borderRadius(bottomLeft: 8.vp, bottomRight: 8.vp)
}
.borderRadius(8)
.padding(left:10,right:10)
ListItem{
Row{
Text('查看全部商品')
.fontWeight(FontWeight.Bold)
.fontColor(Color.RED)
.fontSize(15)
}
.width(100.percent)
.height(38)
.backgroundColor(Color.WHITE)
.borderRadius(8)
.alignItems(VerticalAlign.Center)
.justifyContent(FlexAlign.Center)
}
.padding(left:10,right:10)
}
.width(100.percent)
.layoutWeight(1)
.backgroundColor(Color(247, 247, 247, alpha: 1.0))
}
}
}
That's all for today's content. Thank you for reading.