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）

以上关于HarmonyOS4.0 ArkUI构建布局的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。