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

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

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