各位好，幽藍君又來分享倉頡開發教程了，今天的內容是店鋪詳情頁：

這個頁面的內容看似簡單，其實有很多小細節需要注意，主要還是讓大家熟悉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語言##倉頡##購物#