当前位置：首页 > news >正文

鸿蒙Next仓颉语言开发实战教程：店铺详情页

news 来源：原创 2025/6/10 7:38:52

各位好，幽蓝君又来分享仓颉开发教程了，今天的内容是店铺详情页：

这个页面的内容看似简单，其实有很多小细节需要注意，主要还是让大家熟悉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语言##仓颉##购物#