HarmonyOS4.0 ArkUI构建布局

一、线性布局

属性说明：

• justifyContent：设置子元素在主轴方向的对齐方式

参数：FlexAlign 枚举

• alignItems：设置子元素在交叉轴方向的对齐方式

参数：

Row容器使用 VerticalAlign 枚举

Column 容器使用 HorizontalAlign 枚举

1、Column 布局

1.1、FlexAlign

1.2、HorizontalAlign

1.3、代码示例

@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)                  
                 
  }                  
}

2、Row 布局

2.1、FlexAlign

2.2、VerticalAlign

2.3、代码示例

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

3、需求

二、列表布局

List 是一种复杂布局，具备以下特点：

1. 列表项（ListItem）数量过多超出屏幕后，会自动提供滚动功能
2. 列表项（ListItem）既可以纵向排列，也可以横向排列

语法：

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

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”)                  
  }                  
}

原文始发于微信公众号（数字游民 PG）