ArkUI学习-Column和Row

一、Column

1、Column容器

作用：整个页面垂直方向布局

//列
Column() {
    Text("刘备")
      .backgroundColor(Color.Pink)
    Text("关羽")
      .backgroundColor(Color.Pink)
      .margin(10)
    Text("张飞")
      .backgroundColor(Color.Pink)
}
.width('100%') //宽和高支持 百分比布局
.height('100%')
.backgroundColor("#888888")

二、Row

1、Row容器

作用：整个页面水平方向布局

//行
Row() {
  Text("刘备")
    .backgroundColor(Color.Pink)
  Text("关羽")
    .backgroundColor(Color.Pink)
    .margin(10)
  Text("张飞")
    .backgroundColor(Color.Pink)
}
.width('100%') //宽和高支持 百分比布局
.height('100%')
.backgroundColor("#888888")

三、Column和Row的权重

1、Row横向的权重

Row(){
  // layoutWeight 自适应伸缩，按照权重，分配剩余空间
  Text('左侧')
    .layoutWeight(1)
    .height(40)
    .backgroundColor(Color.Pink)

  Text('右侧固定')
    .width(80)
    .height(40)
    .backgroundColor(Color.Orange)
}

2、Column竖直方向的权重

Column(){
  Text('底部占1份')
    .layoutWeight(1)
    .width(60)
    .backgroundColor(Color.Pink)

  Text('底部占2份')
    .layoutWeight(2)
    .width(60)
    .backgroundColor(Color.Orange)
}

四、Column和Row

1、属性介绍：justifyContent

Column({ space: 10 }) {
  //列
  Column() {
    Text("刘备")
      .backgroundColor(Color.Pink)
    Text("关羽")
      .backgroundColor(Color.Pink)
    Text("张飞")
      .backgroundColor(Color.Pink)
  }
  .width(300)
  .height(200)
  .backgroundColor("#88F8F8")
  //-------1、主轴方向对齐方式--------
  // .justifyContent(FlexAlign.Start)//1、主轴方向首端对齐；
  // .justifyContent(FlexAlign.Center)//2、主轴方向中心对齐；
  // .justifyContent(FlexAlign.End)//3、主轴方向末端对齐；
  // .justifyContent(FlexAlign.SpaceBetween)//4、第一个元素与首端对齐，最后一个元素与末端对齐；
  // .justifyContent(FlexAlign.SpaceAround)//5、第一个元素到首端的距离是最后一个元素到末端的距离是相邻元素之间距离的一半；
   .justifyContent(FlexAlign.SpaceEvenly)//6、元素等间距布局；



  //行
  Row() {
    Text("刘备")
      .backgroundColor(Color.Pink)
    Text("关羽")
      .backgroundColor(Color.Pink)
    Text("张飞")
      .backgroundColor(Color.Pink)
  }
  .width(300)
  .height(200)
  .backgroundColor("#588888")
  //-------1、主轴方向对齐方式--------
  // .justifyContent(FlexAlign.Start)//1、主轴方向首端对齐；
  // .justifyContent(FlexAlign.Center)//2、主轴方向中心对齐；
  // .justifyContent(FlexAlign.End)//3、主轴方向末端对齐；
  // .justifyContent(FlexAlign.SpaceBetween)//4、第一个元素与首端对齐，最后一个元素与末端对齐；
  // .justifyContent(FlexAlign.SpaceAround)//5、第一个元素到首端的距离是最后一个元素到末端的距离是相邻元素之间距离的一半；
   .justifyContent(FlexAlign.SpaceEvenly)//6、元素等间距布局；

}

2、属性介绍：alignltems

Column({ space: 10 }) {
  //列
  Column() {
    Text("刘备")
      .backgroundColor(Color.Pink)
    Text("关羽")
      .backgroundColor(Color.Pink)
    Text("张飞")
      .backgroundColor(Color.Pink)
  }
  .width(300)
  .height(200)
  .backgroundColor("#88F8F8")
  //-------2、交叉轴方向对齐方式--------
  // .alignItems(HorizontalAlign.Start)//1、子控件在交叉轴方向左对齐；
  // .alignItems(HorizontalAlign.Center)//2、子控件在交叉轴方向居中对齐；
   .alignItems(HorizontalAlign.End) //3、子控件在交叉轴方向右对齐；



  //行
  Row() {
    Text("刘备")
      .backgroundColor(Color.Pink)
    Text("关羽")
      .backgroundColor(Color.Pink)
    Text("张飞")
      .backgroundColor(Color.Pink)
  }
  .width(300)
  .height(200)
  .backgroundColor("#588888")
  //-------2、交叉轴方向对齐方式--------
  // .alignItems(VerticalAlign.Top) //1、子控件在交叉轴方向顶部对齐；
  // .alignItems(VerticalAlign.Center) //2、子控件在交叉轴方向居中对齐；
   .alignItems(VerticalAlign.Bottom) //3、子控件在交叉轴方向右对齐；

}

五、控件-绝对定位

 // position绝对定位：可以控制组件位置，可以实现层叠效果
    // 语法：
    // .position({
    //   x: 50,
    //   y: 50
    // })
    // 特点：
    // 1. 相对于父组件左顶点进行偏移（调整位置）
    // 2. 原本的位置不占了，且可以任意调整位置，不影响其他元素
 
    // 后面的组件明显层次更高，会盖住前面的组件
    // 需求：不动结构的情况下，调整组件的层级 .zIndex(数字)
    Column() {
 
      Text('大儿子')
        .width(80)
        .height(80)
        .backgroundColor(Color.Green)
        .zIndex(3)
      Text('二儿子定位')
        .width(80)
        .height(80)
        .backgroundColor(Color.Yellow)
        .position({
          x: 50,
          y: 50
        })
        .zIndex(4)
      Text('三儿子')
        .width(80)
        .height(80)
        .backgroundColor(Color.Orange)
        .zIndex(2)
    }
    .width(300)
    .height(300)
    .backgroundColor(Color.Pink)