ArkUI 基本语法 (鸿蒙布局)

鸿蒙的布局组件，有Column,row,Flax,Stack,List,等
Column和row是比较常见的布局组件，Column是列排序，具体就是数组按照从上到下依次排序，Row是行排列，容器内的元素会从左往右依次排列
Flax可以Row和Column来转换排列方式，之后和row或Column差不多，但是可以通过FlexWrap进行换行·

@Entry
@Component
struct Index {
  build() {
    Flex({ wrap:FlexWrap.Wrap }) {
      Text('aa')
        .width('33%')
        .height(30)
        .backgroundColor(Color.Orange)
      Text('bbb')
        .width('33%')
        .height(30)
        .backgroundColor(Color.Pink)
      Text('cc')
        .width('33%')
        .height(30)
        .backgroundColor(Color.Orange)
      Text('111')
        .width('33%')
        .height(30)
        .backgroundColor(Color.Pink)

    }
    .width('100%')
    .height(300)
    .backgroundColor('#ccc')
  }
}

内边距：组件内的内容与组件框的距离每个组件都会有一个组件框

外边距：组件框和其他内容，或者面板的距离

border：边框线

borderRadius：边框圆角
背景属性
backgroundColor ：背景色
backgroundImage：背景图
backgroundImageSize：背景图尺寸
backgroundImagePosition：背景图位置

主轴对齐方式，

主轴：容器内内容排列的方向 Column的是垂直排列的，那么它的主轴便是垂直方向
交叉轴：是与它相反方向，与它的主轴垂直

主轴对齐方式
属性：justifyContent()
Start 首端对齐
Center 居中对齐
End 尾部对齐
Spacebetween 两端对齐
子元素之间间距相等
SpaceAround 子元素两侧间距相等
第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半
SpaceEvenly 相邻元素之间的距离、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('2')
        .width(200)
        .height(40)
        .backgroundColor(Color.Pink)
      Text('3')
        .width(200)
        .height(40)
        .backgroundColor(Color.Orange)
      Text('4')
        .width(200)
        .height(40)
        .backgroundColor(Color.Brown)
    }
    .width('100%')
    .height(300)
    .backgroundColor('#ccc')
    // 首端对齐
    .justifyContent(FlexAlign.Start)
    // 居中对齐
    .justifyContent(FlexAlign.Center)
    // 尾部对齐
    .justifyContent(FlexAlign.End)
    // 第一个元素与行首对齐，最后一个元素与行尾对齐
    .justifyContent(FlexAlign.SpaceBetween)
    // 第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半
    .justifyContent(FlexAlign.SpaceAround)
    // 相邻元素之间的距离、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样
    .justifyContent(FlexAlign.SpaceEvenly)
  }
}

交叉轴对齐方式
属性：alignItems().
// 默认左对齐
.alignItems(HorizontalAlign.Start)
// 居中
.alignItems(HorizontalAlign.Center)
// 右对齐
.alignItems(HorizontalAlign.End)
单个子元素交叉轴对齐方式
属性：alignSelf()
参数：枚举ItemAlign(Stretch拉伸，交叉轴拉伸效果)
layoutWeight() layoutweight(1)他会独占剩余空白的所有区域