Harmony学习（二）------ArkUI（2）

1.主轴对齐方式.justifyContent

复制代码

  build() {
    Column(){
      Text()
        .width(200).height(100)
        .backgroundColor(Color.Yellow)
        .border({
          width:2
        })
      Text()
        .width(200).height(100)
        .backgroundColor(Color.Yellow)
        .border({
          width:2
        })
        .margin(10)
      Text()
        .width(200).height(100)
        .backgroundColor(Color.Yellow)
        .border({
          width:2
        })
    }
    .width('100%').height('100%')
    .justifyContent(FlexAlign.SpaceBetween)  
  }
}

2.交叉轴对齐方式.alignItems()

交叉轴水平方向：HorizontalAlign

交叉轴垂直方向：VerticalAlign

复制代码

build() {
    Column(){
      Text()
        .width(200).height(100)
        .backgroundColor(Color.Yellow)
        .border({
          width:2
        })
      Text()
        .width(200).height(100)
        .backgroundColor(Color.Yellow)
        .border({
          width:2
        })
        .margin({top:10,bottom:10})
      Text()
        .width(200).height(100)
        .backgroundColor(Color.Yellow)
        .border({
          width:2
        })
    }
    .width('100%').height('100%')
    .justifyContent(FlexAlign.SpaceBetween)
    .alignItems(HorizontalAlign.End)
  }

3.自适应伸缩.layoutWeight()

按照份数权重，分配剩余空间

复制代码

build() {
    Row(){
      Text('老大')
        .backgroundColor(Color.Blue)
        .layoutWeight(1)  //占剩余空间权重
      Text('老二')
        .backgroundColor(Color.Yellow)
        .layoutWeight(2)
      Text('老三')
        .backgroundColor(Color.Red)
        .layoutWeight(1)
    }
    .width('100%')
    .height('100%')
    .backgroundColor(Color.Gray)
  }

4.Blank() 填充空白区域，像弹簧

5.Checkbox()复选框

6.Text(){Span('1')Span('2')}

7.弹性布局Flex

复制代码

build() {
    Flex({
      direction:FlexDirection.Row,      //主轴方向
      justifyContent:FlexAlign.SpaceBetween,   //主轴方式
      alignItems:ItemAlign.Center    //交叉轴方式
    }){
      Text()
        .width(100).height(100)
        .backgroundColor(Color.Yellow)
        .border({
          width:2
        })
      Text()
        .width(100).height(100)
        .backgroundColor(Color.Yellow)
        .border({
          width:2
        })
      Text()
        .width(100).height(100)
        .backgroundColor(Color.Yellow)
        .border({
          width:2
        })
    }
    .width('100%').height('90%')
    .backgroundColor(Color.Green)
  }

弹性布局Flex 多行

复制代码

Column(){
      Flex({
        wrap:FlexWrap.Wrap    //设置多行
      }){
        Text('我是他').backgroundColor(Color.Gray).margin({right:5,bottom:5}).padding(4)
        Text('他不是我').backgroundColor(Color.Gray).margin({right:5}).padding(4)
        Text('我到底是谁').backgroundColor(Color.Gray).margin({right:5}).padding(4)
        Text('你是？').backgroundColor(Color.Gray).margin({right:5}).padding(4)
        Text('到底是什么').backgroundColor(Color.Gray).margin({right:5}).padding(4)
      }
    }
    .width('100%')
    .height('100%')
  }

8.绝对定位：控制组件位置，实现层叠效果

复制代码

  build() {
    Column(){
      Text()
        .width(200).height(100)
        .backgroundColor(Color.Yellow)
        .border({
          width:2
        })
      Text()
        .width(200).height(100)
        .backgroundColor(Color.Blue)
        .border({
          width:2
        })
        //绝对定位 控制位置，层叠效果
        .position({
          x:0,
          y:0
        })
        //zindex设置层级
        .zIndex(-1)
      Text()
        .width(200).height(100)
        .backgroundColor(Color.Red)
        .border({
          width:2
        })
    }
    .width('100%').height('100%')
  }

9.层叠布局Stack（）{}

复制代码

build() {
    //层叠方位
    Stack({alignContent:Alignment.TopEnd}){
      Text('黄药师').width(250).height(500).backgroundColor(Color.Yellow)
      Text('黄蓉').width(200).height(400).backgroundColor(Color.Red)
      Text('郭襄').width(150).height(300).backgroundColor(Color.Blue)
    }
    .width(300).height(600)
    .backgroundColor(Color.Pink)
  }