昨天有朋友提到鸿蒙既然有了ArkTs开发语言，为什么还需要仓颉开发语言。其实这个不难理解，安卓有Java和Kotlin，iOS先后推出了Objective-C和Swift，鸿蒙有两种开发语言也就不奇怪了。而且仓颉是比ArkTs更加灵活的语言，虽然现在了解它的开发者还不多，但是未来仓颉一定会成为非常重要的开发语言。
昨天分享了商城应用首页的实现过程，今天我们继续介绍页面的开发，做一下商品详情页面：
详情页面看起来要比首页简单一些，不过也有很多首页没有出现过内容，下面为大家详细介绍。
导航栏
导航栏的内容有返回按钮和标题。我们怎样实现在只有两个元素的情况下，将一个布局在左侧，一个保持在中间，这里我使用的是层叠布局，把它俩分开，互不影响，导航栏的具体代码如下：
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)
价格和简介
这部分是几个文本组件的简单布局，简单分析一下横向和纵向布局就行了，然后就是文字的样式不太一样，这里需要注意的是，设置颜色属性是不支持使用字符串的，16进制的颜色值直接写就行，不用加引号了：
Column {
Text('100')
.fontSize(20)
.margin(top:10)
.fontColor(Color.RED)
Row {
Text('**制造商').fontSize(12).fontColor(0XC3A374)
Text('生产周期3天').fontSize(12).fontColor(0X4a4a4a)
}
.width(100.percent).justifyContent(FlexAlign.SpaceBetween).margin(top:8)
Text('纯棉牛津纺舒适基础长袖衬衫9色可选')
.fontColor(Color.BLACK)
.fontSize(18)
.fontWeight(FontWeight.Bold)
.margin(top:25)
Text('牛津纺衬衫时时尚界的不老男神，以英伦精英气质风靡数百年，单穿内搭皆宜')
.fontColor(Color.GRAY)
.fontSize(14)
.margin(top:8,bottom:15)
}.padding( right: 10,left: 10).width(100.percent).alignItems(HorizontalAlign.Start) .backgroundColor(Color.WHITE)
店铺信息
店铺信息部分是商铺图片和几个文本组件的横向布局，不过我这里图标部分我用的是文字组件，区别不大，具体的代码如下：
Row(){
Row(){
Text('商城')
.fontSize(22)
.fontWeight(FontWeight.Bold)
.fontColor(Color.WHITE)
}
.alignItems(VerticalAlign.Center)
.justifyContent(FlexAlign.Center)
.width(76)
.height(76)
.backgroundColor(Color.RED)
.borderRadius(8)
.margin(left:10)
Column(){
Text('哈哈旗舰店')
.fontWeight(FontWeight.Bold)
.fontColor(Color.BLACK)
.fontSize(16)
Row(){
Text('商品质量 5.0')
.fontColor(0X4a4a4a)
.fontSize(15)
Text('服务态度 5.0')
.fontColor(0X4a4a4a)
.fontSize(15)
.margin(left:40)
}
.margin(top:15)
}
.margin(left:10)
.alignItems(HorizontalAlign.Start)
.justifyContent(FlexAlign.Center)
}
.width(100.percent)
.justifyContent(FlexAlign.Start)
.alignItems(VerticalAlign.Center)
以上就是仓颉开发语言实现商品详情页面的主要过程。##HarmonyOS语言##仓颉##购物#
