布局之弹性布局

// 弹性布局
@Entry
@Component
struct FlexPage {
  @State message: string = 'Hello World'

  build() {
    // Flex({direction:FlexDirection.Row}){//使其主轴方向为水平方向，并且排布方向为正向（从左到右
    //   Column(){Text('1').fontColor(Color.White)}.width('20%').height(60).backgroundColor(Color.Blue)
    //   Column(){Text('2').fontColor(Color.White)}.width('20%').height(60).backgroundColor(Color.Pink)
    //   Column(){Text('3').fontColor(Color.White)}.width('20%').height(60).backgroundColor(Color.Gray)
    // }
    // .width('100%')
    // .height('100%')

    // Flex({direction:FlexDirection.RowReverse}){//使其主轴方向为水平方向，并且排布方向为反向（从右到左
    //   Column(){Text('1').fontColor(Color.White)}.width('20%').height(60).backgroundColor(Color.Blue)
    //   Column(){Text('2').fontColor(Color.White)}.width('20%').height(60).backgroundColor(Color.Pink)
    //   Column(){Text('3').fontColor(Color.White)}.width('20%').height(60).backgroundColor(Color.Gray)
    // }
    // .width('100%')
    // .height('100%')

    // Flex({direction:FlexDirection.Column}){//使其主轴方向为垂直方向，并且排布方向为正向（从上到下
    //   Column(){Text('1').fontColor(Color.White)}.width('20%').height(60).backgroundColor(Color.Blue)
    //   Column(){Text('2').fontColor(Color.White)}.width('20%').height(60).backgroundColor(Color.Pink)
    //   Column(){Text('3').fontColor(Color.White)}.width('20%').height(60).backgroundColor(Color.Gray)
    // }
    // .width('100%')
    // .height('100%')

    // Flex({direction:FlexDirection.ColumnReverse}){//使其主轴方向为垂直方向，并且排布方向为反向（从下到上
    //   Column(){Text('1').fontColor(Color.White)}.width('20%').height(60).backgroundColor(Color.Blue)
    //   Column(){Text('2').fontColor(Color.White)}.width('20%').height(60).backgroundColor(Color.Pink)
    //   Column(){Text('3').fontColor(Color.White)}.width('20%').height(60).backgroundColor(Color.Gray)
    // }
    // .width('100%')
    // .height('100%')

    // wrap:FlexWrap.Wrap换行，就是当子元素的宽度合大于父元素的宽度的时候就会换行
    // wrap:FlexWrap.WrapReverse换行，就是当子元素的宽度合大于父元素的宽度的时候就会换行并且会使排布方向与原本方向相反
    // wrap:FlexWrap.NoWrap不换行，如果当子元素的宽度合大于父元素的宽度的时候就会压缩子元素的宽度
    // Flex({direction:FlexDirection.Row,wrap:FlexWrap.WrapReverse}){//使其主轴方向为水平方向，并且排布方向为正向（从左到右
    //   Column(){Text('1').fontColor(Color.White)}.width('50%').height(60).backgroundColor(Color.Blue)
    //   Column(){Text('2').fontColor(Color.White)}.width('50%').height(60).backgroundColor(Color.Pink)
    //   Column(){Text('3').fontColor(Color.White)}.width('50%').height(60).backgroundColor(Color.Gray)
    // }
    // .width('100%')
    // .height('100%')

  //   主轴方向的对齐方式是通过justifyContent参数设置在主轴方向的对齐方式。跟线性布局的是一样的，可以移步去看线性布局的

  //   下面是交叉轴的对齐方式
  //   alignItems:ItemAlign.Start交叉轴的开始位置对齐，因为这里的主轴方向是水平方向，所以交叉轴就是垂直方向，所以就是顶部对齐
  //   alignItems:ItemAlign.Center子元素位于交叉轴的中心位置并且居中对齐
  //   alignItems:ItemAlign.End子元素位于交叉轴的结束位置并且底部对齐
  //   alignItems:ItemAlign.Baseline子元素文本基线对齐，就是子元素的文本处于一条水平线上
  //   alignItems:ItemAlign.Stretch子元素在交叉轴方向进行拉伸填充，使其和父元素一样
  //   注： 子组件的alignSelf属性也可以设置子组件在父容器交叉轴的对齐格式，且会覆盖Flex布局容器中alignItems配置
  //   Flex({direction:FlexDirection.Row,justifyContent:FlexAlign.Center,alignItems:ItemAlign.Stretch}){//使其主轴方向为水平方向，并且排布方向为正向（从左到右
  //     Column(){Text('1').height('100%').fontColor(Color.White)}.width('25%').height(30).backgroundColor(Color.Blue)
  //     Column(){Text('2').height('100%').fontColor(Color.White)}.width('25%').height(60).backgroundColor(Color.Pink)
  //     Column(){Text('3').height('100%').fontColor(Color.White)}.width('25%').height(90).backgroundColor(Color.Gray)
  //   }
  //   .width('100%')
  //   .height('100%')

  //   内容对齐方式
    Flex({ justifyContent: FlexAlign.SpaceBetween, wrap: FlexWrap.Wrap, alignContent: FlexAlign.SpaceEvenly }) {
      Text('1').width('30%').height(20).backgroundColor(0xF5DEB3)
      Text('2').width('60%').height(20).backgroundColor(0xD2B48C)
      Text('3').width('40%').height(20).backgroundColor(0xD2B48C)
      Text('4').width('30%').height(20).backgroundColor(0xF5DEB3)
      Text('5').width('20%').height(20).backgroundColor(0xD2B48C)
    }
    .width('90%')
    .height(100)
    .backgroundColor(0xAFEEEE)

  //   flexBasis设置子组件的主轴方向的大小，如果flexBasis设置了值，以flexBasis大小为主，反之则以设置的width/height为主
  //   如果没有设置width/height则自适应尺寸
  }
}