鸿蒙仓颉开发语言实战教程：实现商城应用详情页

昨天有朋友提到鸿蒙既然有了ArkTs开发语言，为什么还需要仓颉开发语言。其实这个不难明白，安卓有Java和Kotlin，iOS先后推出了Objective-C和Swift，鸿蒙有两种开发语言也就不奇怪了。而且仓颉是比ArkTs更加灵活的语言，虽然现在相识它的开发者还不多，但是将来仓颉一定会成为非常紧张的开发语言。
昨天分享了商城应用首页的实现过程，本日我们继承介绍页面的开发，做一下商品详情页面：

详情页面看起来要比首页简朴一些，不外也有很多首页没有出现过内容，下面为大家详细介绍。
导航栏
导航栏的内容有返回按钮和标题。我们怎样实现在只有两个元素的环境下，将一个布局在左侧，一个保持在中间，这里我利用的是层叠布局，把它俩分开，互不影响，导航栏的具体代码如下：

2. Stack {
3.      Text('商品详情')
4.     .fontSize(16)
5.     .fontWeight(FontWeight.Bold)
6.     .fontColor(Color.BLACK)
7.     Row{
8.          Image(@r(app.media.back))
9.     .width(27)
10.     .height(27)
11.      .onClick({evet => Router.back()})
12.     }.width(100.percent).justifyContent(FlexAlign.Start).padding(left:5)
13. }
14. .width(100.percent)
15. .height(60)
16. .backgroundColor(Color.WHITE)

复制代码

价格和简介
这部门是几个文本组件的简朴布局，简朴分析一下横向和纵向布局就行了，然后就是笔墨的样式不太一样，这里需要注意的是，设置颜色属性是不支持利用字符串的，16进制的颜色值直接写就行，不消加引号了：

2. Column {
3.           Text('100')
4.           .fontSize(20)
5.           .margin(top:10)
6.           .fontColor(Color.RED)
7.           Row {
8.               Text('**制造商').fontSize(12).fontColor(0XC3A374)
9.               Text('生产周期3天').fontSize(12).fontColor(0X4a4a4a)
10.           }
11.           .width(100.percent).justifyContent(FlexAlign.SpaceBetween).margin(top:8)
12.           Text('纯棉牛津纺舒适基础长袖衬衫9色可选')
13.          .fontColor(Color.BLACK)
14.          .fontSize(18)
15.          .fontWeight(FontWeight.Bold)
16.          .margin(top:25)
17. Text('牛津纺衬衫时时尚界的不老男神，以英伦精英气质风靡数百年，单穿内搭皆宜')
18.           .fontColor(Color.GRAY)
19.          .fontSize(14)
20.          .margin(top:8,bottom:15)
21. }.padding( right: 10,left: 10).width(100.percent).alignItems(HorizontalAlign.Start) .backgroundColor(Color.WHITE)

复制代码

店肆信息
店肆信息部门是商铺图片和几个文本组件的横向布局，不外我这里图标部门我用的是笔墨组件，区别不大，具体的代码如下：

2. Row(){
3.   Row(){
4.                 Text('商城')
5.                 .fontSize(22)
6.                 .fontWeight(FontWeight.Bold)
7.                 .fontColor(Color.WHITE)
8.   }
9.             .alignItems(VerticalAlign.Center)
10.             .justifyContent(FlexAlign.Center)
11.   .width(76)
12.   .height(76)
13.    .backgroundColor(Color.RED)
14.   .borderRadius(8)
15.   .margin(left:10)
16.   Column(){
17.     Text('哈哈旗舰店')
18.                 .fontWeight(FontWeight.Bold)
19.       .fontColor(Color.BLACK)
20.       .fontSize(16)
21.     Row(){
22.       Text('商品质量 5.0')
23.         .fontColor(0X4a4a4a)
24.         .fontSize(15)
25.       Text('服务态度 5.0')
26.         .fontColor(0X4a4a4a)
27.         .fontSize(15)
28.         .margin(left:40)
29.     }
30.     .margin(top:15)
31.   }
32.   .margin(left:10)
33.   .alignItems(HorizontalAlign.Start)
34.   .justifyContent(FlexAlign.Center)
35. }
36. .width(100.percent)
37. .justifyContent(FlexAlign.Start)
38. .alignItems(VerticalAlign.Center)

复制代码

以上就是仓颉开发语言实现商品详情页面的主要过程。#HarmonyOS语言##仓颉##购物#