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

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

这个页面的内容看似简单，其实有很多小细节需要注意，主要还是让大家熟悉List容器的使用。
整个页面由导航栏和List容器两大部分组成，导航栏我们已经分享过多次，今天不再赘述。主要说一下List部分。
首先需要注意的是在有自定义导航栏的情况下如何让List占满剩余屏幕，你可以设置layoutWeight属性：

1. List{
2. }
3. .width(100.percent)
4. .layoutWeight(1)
5. .backgroundColor(Color(247, 247, 247, alpha: 1.0))

复制代码

在List容器中，大部分内容都可以直接使用ListItem实现，但是在店铺简介和开店时间部分可能需要使用ListItemGroup，这里需要注意，使用ListItemGroup需要传入参数ListItemGroupParams，这里的内容主要是header和footer样式，不过可以传空：

1. ListItemGroup(ListItemGroupParams()){}

复制代码

另外，下面的几条内容是有圆角的，不过仓颉提供了非常灵活的圆角设置方式，你可以在borderRadius属性中直接写一个数字代表每一个圆角的弧度：

1. .borderRadius(8)

复制代码

也可以逐个设置每一个角的弧度,不过这时候就不能直接写数字了，这里Length类型，需要带上单位：

1. .borderRadius(bottomLeft: 8.vp, bottomRight: 8.vp,topLeft: 8.vp, topRight: 8.vp)

复制代码

以上就是本页面需要注意的地方，下面附上本页面的完整代码：

1. import ohos.base.*
2. import ohos.component.*
3. import ohos.state_manage.*
4. import ohos.state_macro_manage.*
5. import ohos.router.Router
6. import cj_res_entry.app
7. @Entry
8. @Component
9. public class shoppage  {
10.     func build() {
11.         Column {
12.             Stack {
13.                  Text('店铺详情')
14.                 .fontSize(16)
15.                 .fontWeight(FontWeight.Bold)
16.                 .fontColor(Color.BLACK)
17.                 Row{
18.                      Image(@r(app.media.back))
19.                 .width(27)
20.                 .height(27)
21.                  .onClick({evet => Router.back()})
22.                 }.width(100.percent).justifyContent(FlexAlign.Start).padding(left:5)
23.             }
24.             .width(100.percent)
25.             .height(60)
26.             .backgroundColor(Color.WHITE)
27.             List(space:10){
28.                 ListItem{
29.                     Column{
30.                          Text('商城')
31.                             .fontSize(22)
32.                             .fontWeight(FontWeight.Bold)
33.                             .fontColor(Color.WHITE)
34.                         .width(50)
35.                         .height(50)
36.                         .backgroundColor(Color.RED)
37.                         .textAlign(TextAlign.Center)
38.                         .borderRadius(8)
39.                         Text('幽蓝计划旗舰店')
40.                         .fontSize(15)
41.                         .fontColor(Color.BLACK)
42.                         .fontWeight(FontWeight.Bold)
43.                         .margin(top:5)
44.                         Column{
45.                             Text('已关注')
46.                             .fontSize(13)
47.                             .fontColor(Color.GRAY)
48.                             Text('11万人关注')
49.                             .fontSize(12)
50.                             .fontColor(Color.GRAY)
51.                         }
52.                         .width(110)
53.                         .height(40)
54.                         .margin(top:30)
55.                         .alignItems(HorizontalAlign.Center)
56.                         .justifyContent(FlexAlign.Center)
57.                         .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)
58.                     }
59.                     .width(100.percent)
60.                     .alignItems(HorizontalAlign.Center)
61.                     .backgroundColor(Color.WHITE)
62.                     .padding(bottom:10)
63.                 }
64.                 ListItem{
65.                      Row{
66.                             Text('店铺二维码')
67.                             .fontColor(Color.BLACK)
68.                             .fontSize(15)
69.                             .fontWeight(FontWeight.Bold)
70.                             Image(@r(app.media.chaofu))
71.                             .width(22)
72.                             .height(22)
73.                         }
74.                         .alignItems(VerticalAlign.Center)
75.                         .justifyContent(FlexAlign.SpaceBetween)
76.                         .width(100.percent)
77.                         .height(38)
78.                         .borderRadius(8)
79.                     .padding(left:10,right:10)
80.                         .backgroundColor(Color.WHITE)
81.                 }
82.                 .padding(left:10,right:10)
83.                 ListItemGroup(ListItemGroupParams()){
84.                     ListItem{
85.                         Row{
86.                             Text('店铺简介')
87.                             .fontColor(Color.BLACK)
88.                             .fontSize(15)
89.                             .fontWeight(FontWeight.Bold)
90.                             Text('潮服/运配/男女服饰')
91.                             .fontColor(Color.GRAY)
92.                             .fontSize(15)
93.                              .margin(left:10)
94.                         }
95.                         .alignItems(VerticalAlign.Center)
96.                         .width(100.percent)
97.                         .height(38)
98.                          .padding(left:10,right:10)
99.                     }
100.                     .backgroundColor(Color.WHITE)
101.                     .borderRadius(topLeft: 8.vp, topRight: 8.vp)
102.                     
103.                     ListItem{
104.                         Row{
105.                             Text('开店时间')
106.                             .fontColor(Color.BLACK)
107.                             .fontSize(15)
108.                             .fontWeight(FontWeight.Bold)
109.                             Text('2025-05-05')
110.                             .fontColor(Color.GRAY)
111.                             .fontSize(15)
112.                             .margin(left:10)
113.                         }
114.                         .alignItems(VerticalAlign.Center)
115.                         .width(100.percent)
116.                         .height(38)
117.                          .padding(left:10,right:10)
118.                     }
119.                     .backgroundColor(Color.WHITE)
120.                     .borderRadius(bottomLeft: 8.vp, bottomRight: 8.vp)
121.                 }
122.                  .borderRadius(8)
123.                  .padding(left:10,right:10)
124.                
125.                 ListItem{
126.                     Row{
127.                         Text('查看全部商品')
128.                         .fontWeight(FontWeight.Bold)
129.                         .fontColor(Color.RED)
130.                         .fontSize(15)
131.                     }
132.                     .width(100.percent)
133.                     .height(38)
134.                     .backgroundColor(Color.WHITE)
135.                     .borderRadius(8)
136.                     .alignItems(VerticalAlign.Center)
137.                     .justifyContent(FlexAlign.Center)
138.                 }
139.                 .padding(left:10,right:10)
140.             }
141.             .width(100.percent)
142.             .layoutWeight(1)
143.             .backgroundColor(Color(247, 247, 247, alpha: 1.0))
144.         }
145.     }
146. }

复制代码

今天的内容就是这样，感谢阅读。##HarmonyOS语言##仓颉##购物#

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！