HarmonyOS 购物app设置页面demo？

Question

如题：HarmonyOS 购物app设置页面demo？

Answer 1

代码如下

@Entry
@Component
struct Index {
  private str: itemObj[] = [
    new itemObj('个人信息', ""),
    new itemObj('我的收货地址', ""),
    new itemObj('客服电话', "xxx"),
    new itemObj('帮助中心', ""),
    new itemObj('关于我们', ""),
    new itemObj('清除缓存', "56.41MB"),
    new itemObj('检测版本', "2.5.9"),
    new itemObj('隐私设置', ""),
    new itemObj('投诉举报', ""),
  ]

  build() {
    Column() {
      Row(){
        // "<"应该要改为图片，具体看调整位置
        Text("<").position({left:15,top:10}).fontSize(30).lineHeight(30)
        Text("设置")
      }.width("100%").alignItems(VerticalAlign.Center).justifyContent(FlexAlign.Center).height(46).backgroundColor(Color.White)
      .borderWidth({ bottom: 0.1}).borderColor(Color.Gray)
      Column(){
        List({space:0}){
          ForEach(this.str, (item: itemObj,index:number) => {
            ListItem() {
              Flex({ justifyContent: FlexAlign.SpaceBetween }){
                Text(item.name)
                  .textAlign(TextAlign.Start).borderRadius(10).backgroundColor(Color.White).fontColor(Color.Black).alignSelf(ItemAlign.Center)
              if(index==2||index==5||index==6){
                Flex({ justifyContent: FlexAlign.End }){
                  Text(item.value).alignSelf(ItemAlign.Center).height("100%").fontColor("#ffd0c7c7")
                }.layoutWeight(1).padding({right:20})
              }
                Text(">").fontSize(30).lineHeight(30).padding({right:20}).alignSelf(ItemAlign.Center)
              }.width('100%').height(46).backgroundColor(Color.White).padding({left:20}) .borderColor(Color.Gray).margin({bottom:index==1?12:0})
            }
          }, (item: itemObj) => item.name)
        }
        .listDirection(Axis.Vertical) // 排列方向
        .divider({ strokeWidth: 1, color: "#ffefe8e8", startMargin: 0, endMargin: 0 }) // 每行之间的分界线
      }.width("100%")
      Row(){
        // "<"应该要改为图片，具体看调整位置
        Text("退出当前账号").fontColor(Color.Green)
      }.width("100%").alignItems(VerticalAlign.Center).justifyContent(FlexAlign.Center).height(46).backgroundColor(Color.White).margin({top:12})
    }
    .height('100%')
    .width('100%')
    .backgroundColor("#ffefe8e8")
  }
}

class itemObj{
  name:string
  value:string

  constructor(name:string,value:string) {
    this.name = name
    this.value = value
  }
}