各位早上好，幽蓝君又来分享仓颉开发教程了，今天的内容是店铺详情页：
这个页面的内容看似简单，其实有很多小细节需要注意，主要还是让大家熟悉List容器的使用。
整个页面由导航栏和List容器两大部分组成，导航栏我们已经分享过多次，今天不再赘述。主要说一下List部分。
首先需要注意的是在有自定义导航栏的情况下如何让List占满剩余屏幕，你可以设置layoutWeight属性：
List{
}
.width(100.percent)
.layoutWeight(1)
.backgroundColor(Color(247, 247, 247, alpha: 1.0))
在List容器中，大部分内容都可以直接使用ListItem实现，但是在店铺简介和开店时间部分可能需要使用ListItemGroup，这里需要注意，使用ListItemGroup需要传入参数ListItemGroupParams，这里的内容主要是header和footer样式，不过可以传空：
ListItemGroup(ListItemGroupParams()){
}
另外，下面的几条内容是有圆角的，不过仓颉提供了非常灵活的圆角设置方式，你可以在borderRadius属性中直接写一个数字代表每一个圆角的弧度：
.borderRadius(8)
也可以逐个设置每一个角的弧度,不过这时候就不能直接写数字了，这里Length类型，需要带上单位：
.borderRadius(bottomLeft: 8.vp, bottomRight: 8.vp,topLeft: 8.vp, topRight: 8.vp)
以上就是本页面需要注意的地方，下面附上本页面的完整代码：
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))
}
}
}
今天的内容就是这样，感谢阅读。##HarmonyOS语言##仓颉##购物#
