倉頡語言商城應用的頁面開發教程接近尾聲了，今天要分享的是設置頁面：
導航欄還是老樣式，介紹過很多次了，今天不再贅述。這個頁面的內容主要還是介紹List容器的使用。
可以看出列表內容分為三組，所以我們要用到ListItemGroup，不過第一組是沒有標題的，所以可以直接使用ListItem，布局很簡單，具體代碼如下：
ListItem{Row(8){Image(@r(app.media.chaofu)).width(60.vp).height(60).borderRadius(30)Column(20){Text('幽藍計劃').fontSize(16).fontColor(Color.BLACK).fontWeight(FontWeight.Bold)Text('賬號名: youlanjihua').fontSize(13).fontColor(Color.GRAY)}.alignItems(HorizontalAlign.Start)}.backgroundColor(Color.WHITE).width(100.percent).height(90.vp).borderRadius(10).onClick({evet =>})
}下面的兩組內容都是有標題的，實現方案我建議使用List容器的head，方法是先定義header組件，然后在ListItemGroup中引用，具體代碼如下：
@Builder func itemHead(text:String) {Row{Text(text).fontColor(Color.GRAY).fontSize(13)}.width(100.percent).height(35).alignItems(VerticalAlign.Center).padding(top:3,left:10)
}ListItemGroup(ListItemGroupParams(header:{=>bind(this.itemHead,this)('賬號設置')})){//列表內容
}剩下的內容就是下面兩組的內容部分了，可以看出它們幾乎都是一樣的，所以我們可以自定義組件來節省代碼，再次介紹一下自定義組件的相關內容。首先創建新的文件，定義樣式和需要的參數，以本文內容為例，具體代碼是這樣的：
@Component
public class setrow {@Prop var title:String@Prop var icon:CJResource@Prop var subTitle : Stringfunc build() {Row{Row{Image(icon).width(20).height(20)Text(title).fontSize(15).fontColor(0x4a4a4a).margin(left:8)}Row(8){if(subTitle.size > 0){Text(subTitle).fontColor(Color.GRAY).fontSize(12)}Image(@r(app.media.cjright)).width(20).height(20)}.alignItems(VerticalAlign.Center)}.width(100.percent).height(50).justifyContent(FlexAlign.SpaceBetween).backgroundColor(Color.WHITE).padding(left:10,right:10)}
}使用組件：
ListItem{setrow( title: '賬戶與安全', icon: @r(app.media.cjlogo2), subTitle: '賬戶保障可升級')
}最后，分組中的內容是有分割線的，List和ListItemGroup都提供了分割線屬性divider，這里我們只在ListItemGroup就可以，要注意分割線的寬度最好不要設置小于1的值，不然可能會有部分不顯示的情況：
.divider(strokeWidth: 1.vp, color: Color(216, 216, 216), startMargin: 10.vp, endMargin: 0.vp)今天的內容就是這樣，感謝閱讀。##HarmonyOS語言##倉頡##購物#
