鸿蒙 Next 仓颉语言开发实战教程：店铺详情页
作者：幽蓝计划
- 2025-06-09 山东
本文字数：3464 字
阅读完需：约 11 分钟
各位好，幽蓝君又来分享仓颉开发教程了，今天的内容是店铺详情页：
这个页面的内容看似简单，其实有很多小细节需要注意，主要还是让大家熟悉 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.Routerimport cj_res_entry.app@Entry@Componentpublic 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 语言 ##仓颉 ##购物 #
划线
评论
复制
发布于: 刚刚阅读数: 2
版权声明: 本文为 InfoQ 作者【幽蓝计划】的原创文章。
原文链接:【http://xie.infoq.cn/article/5079762d40434693cfee38b51】。未经作者许可，禁止转载。
幽蓝计划
关注
还未添加个人签名 2025-05-09 加入
还未添加个人简介
评论