HarmonyOS4.0 ArkUI构建布局

TypeScript                  
@Entry                  
@Component                  
struct ColumnUI {                  
  build() {                  
                 
    // space：设置内容间隔                  
    Column({ space: 50 }) {                  
      Text(“文本内容一”)                  
      Text(“文本内容二”)                  
      Text(“文本内容三”)                  
      Text(“文本内容四”)                  
    }                  
    .borderColor(“red”)                  
    .width(“100%”)                  
    .height(“100%”)                  
    .borderWidth(2)                  
    .backgroundColor(“green”)                  
    // 主轴方向的对齐方式                  
    .justifyContent(FlexAlign.Center)                  
    // 交叉轴方向的对齐方式                  
    .alignItems(HorizontalAlign.Center)                  
                 
  }                  
}        

TypeScript                  
@Entry                  
@Component                  
struct RowUI {                  
                 
  build() {                  
    Row() {                  
      Text(“文本内容一”)                  
      Text(“文本内容二”)                  
    }                  
    .height(‘100%’)                  
    .width(“100%”)                  
    .borderWidth(2)                  
    .borderColor(“red”)                  
    .backgroundColor(“green”)                  
    .justifyContent(FlexAlign.Center)                  
    .alignItems(VerticalAlign.Top)                  
  }                  
}        

TypeScript                  
List({space:3}){                  
    ListItem(){                  
        Text(“列表项”)                  
    }                  
                     
     ListItem(){                  
        Text(“列表项”)                  
    }                  
}

TypeScript                  
class Shops{                  
  name:string                  
  img:ResourceStr                  
  price:number                  
  status:number                  
                 
  constructor(name:string,img:ResourceStr,price:number,status:number) {                  
    this.name = name                  
    this.img = img                  
    this.price = price                  
    this.status = status                  
  }                  
}                  
@Entry                  
@Component                  
struct ListUi {                  
                 
  private shops:Array= [          
           new Shops(“华为mate70旗舰手机”,$r(“app.media.down”),8999,500),                  
    new Shops(“华为mate70旗舰手机”,$r(“app.media.down”),9999,200),                  
    new Shops(“华为mate70旗舰手机”,$r(“app.media.down”),10999,0),                  
    new Shops(“华为mate70旗舰手机”,$r(“app.media.down”),10999,0),                  
    new Shops(“华为mate70旗舰手机”,$r(“app.media.down”),10999,0),                  
    new Shops(“华为mate70旗舰手机”,$r(“app.media.down”),10999,0),                  
    new Shops(“华为mate70旗舰手机”,$r(“app.media.down”),10999,0),                  
    new Shops(“华为mate70旗舰手机”,$r(“app.media.down”),10999,0),                  
    new Shops(“华为mate70旗舰手机”,$r(“app.media.down”),10999,0),                  
    new Shops(“华为mate70旗舰手机”,$r(“app.media.down”),10999,0)                  
  ]                  
                 
  build() {                  
                 
                 
                 
                 
    Column(){                  
      Row(){                  
        Text(“商品列表”)                  
          .fontSize(30)                  
      }                  
      .width(“90%”)                  
      .height(“60”)                  
                 
      List(){                  
        ForEach(this.shops,(item:Shops) =>{                  
          ListItem(){                  
            Row(){                  
              Image(item.img)                  
                .width(100)                  
                 
              Column({space:4}){                  
                 
                if (item.status) {                  
                  Text(item.name)                  
                    .fontWeight(FontWeight.Bold)                  
                  Text(“原价：￥”+item.price)                  
                    .fontColor(“#c7c7c7”)                  
                    .decoration({type:TextDecorationType.LineThrough})                  
                    .fontSize(14)                  
                  Text(“折扣价：￥”+(item.price – item.status))                  
                    .fontColor(“red”)                  
                  Text(“补贴：￥”+item.status)                  
                    .fontColor(“red”)                  
                } else{                  
                  Text(item.name)                  
                    .fontWeight(FontWeight.Bold)                  
                  Text(“￥”+item.price)                  
                    .fontColor(“red”)                  
                }                  
              }                  
              .alignItems(HorizontalAlign.Start)                  
            }                  
            .width(“90%”)                  
            .backgroundColor(“#ffffff”)                  
            .height(“15%”)                  
            .borderRadius(8)                  
            .margin({bottom:10})                  
          }                  
                 
        })                  
      }                  
    }                  
    .width(“100%”)                  
    .height(“100%”)                  
    .backgroundColor(“#c7c7c7”)                  
  }                  
}