昨天有朋友提到鴻蒙既然有了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語言##倉頡##購物#