鸿蒙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语言##仓颉##购物#