各位好，幽藍(lán)君又來(lái)分享倉(cāng)頡開(kāi)發(fā)教程了，今天的內(nèi)容是店鋪詳情頁(yè)：
這個(gè)頁(yè)面的內(nèi)容看似簡(jiǎn)單，其實(shí)有很多小細(xì)節(jié)需要注意，主要還是讓大家熟悉List容器的使用。
整個(gè)頁(yè)面由導(dǎo)航欄和List容器兩大部分組成，導(dǎo)航欄我們已經(jīng)分享過(guò)多次，今天不再贅述。主要說(shuō)一下List部分。
首先需要注意的是在有自定義導(dǎo)航欄的情況下如何讓List占滿剩余屏幕，你可以設(shè)置layoutWeight屬性：
List{
}
.width(100.percent)
.layoutWeight(1)
.backgroundColor(Color(247, 247, 247, alpha: 1.0))
在List容器中，大部分內(nèi)容都可以直接使用ListItem實(shí)現(xiàn)，但是在店鋪簡(jiǎn)介和開(kāi)店時(shí)間部分可能需要使用ListItemGroup，這里需要注意，使用ListItemGroup需要傳入?yún)?shù)ListItemGroupParams，這里的內(nèi)容主要是header和footer樣式，不過(guò)可以傳空：
ListItemGroup(ListItemGroupParams()){}
另外，下面的幾條內(nèi)容是有圓角的，不過(guò)倉(cāng)頡提供了非常靈活的圓角設(shè)置方式，你可以在borderRadius屬性中直接寫(xiě)一個(gè)數(shù)字代表每一個(gè)圓角的弧度：
.borderRadius(8)
也可以逐個(gè)設(shè)置每一個(gè)角的弧度,不過(guò)這時(shí)候就不能直接寫(xiě)數(shù)字了，這里L(fēng)ength類(lèi)型，需要帶上單位：
.borderRadius(bottomLeft: 8.vp, bottomRight: 8.vp,topLeft: 8.vp, topRight: 8.vp)
以上就是本頁(yè)面需要注意的地方，下面附上本頁(yè)面的完整代碼：
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('幽藍(lán)計(jì)劃旗艦店')
.fontSize(15)
.fontColor(Color.BLACK)
.fontWeight(FontWeight.Bold)
.margin(top:5)
Column{
Text('已關(guān)注')
.fontSize(13)
.fontColor(Color.GRAY)
Text('11萬(wàn)人關(guān)注')
.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('店鋪簡(jiǎn)介')
.fontColor(Color.BLACK)
.fontSize(15)
.fontWeight(FontWeight.Bold)
Text('潮服/運(yùn)配/男女服飾')
.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('開(kāi)店時(shí)間')
.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))
}
}
}
今天的內(nèi)容就是這樣，感謝閱讀。##HarmonyOS語(yǔ)言##倉(cāng)頡##購(gòu)物#
