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是一种复杂布局，具备以下特点：

① 列表项（ListItem）数量过多超出屏幕后，会自动提供滚动功能

② 列表项（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<Shops> = [
    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")
  }
}

15%")
.borderRadius(8)
.margin({bottom:10})
}

    })
  }
}
.width("100%")
.height("100%")
.backgroundColor("#c7c7c7")

}
}

![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/f8c5053c44c945c3afbe643c9842f877.png#pic_center)