倉頡語言商城應用的頁面開發(fā)教程接近尾聲了，今天要分享的是設置頁面：

image.png

導航欄還是老樣式，介紹過很多次了，今天不再贅述。這個頁面的內(nèi)容主要還是介紹List容器的使用。

可以看出列表內(nèi)容分為三組，所以我們要用到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 =>
    })
}

下面的兩組內(nèi)容都是有標題的，實現(xiàn)方案我建議使用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)('賬號設置')})){
    //列表內(nèi)容
}

剩下的內(nèi)容就是下面兩組的內(nèi)容部分了，可以看出它們幾乎都是一樣的，所以我們可以自定義組件來節(jié)省代碼，再次介紹一下自定義組件的相關內(nèi)容。首先創(chuàng)建新的文件，定義樣式和需要的參數(shù)，以本文內(nèi)容為例，具體代碼是這樣的：

@Component
public class setrow {
    @Prop var title:String
    @Prop var icon:CJResource
    @Prop var subTitle : String
    func 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: '賬戶保障可升級')
}

最后，分組中的內(nèi)容是有分割線的，List和ListItemGroup都提供了分割線屬性divider，這里我們只在ListItemGroup就可以，要注意分割線的寬度最好不要設置小于1的值，不然可能會有部分不顯示的情況：

.divider(strokeWidth: 1.vp, color: Color(216, 216, 216), startMargin: 10.vp, endMargin: 0.vp)

今天的內(nèi)容就是這樣，感謝閱讀。##HarmonyOS語言##倉頡##購物#