Flex弹性布局

茶窝网： https://www.chawo.com/wap/#/
淘小说： https://m.taoyuewenhua.com/?ctype=2

Flex布局是什么?

Flex是Flexible Box的缩写，意为”弹性布局”，是一种用于按行或按列布局元素的一维布局方法，可以为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。

flex布局默认有两条轴，水平的主轴和垂直的交叉轴 :

import {LengthMetrics} from '@kit.ArkUI';

...
Flex({
  // 子组件在Flex容器上排列的方向，即主轴的方向
  // direction:FlexDirection.Row,  
  //direction:FlexDirection.Column,
  direction:FlexDirection.RowReverse,
  //设置是否换行
  wrap: FlexWrap.Wrap,
  //所有子组件在Flex容器主轴上的对齐格式
  justifyContent: FlexAlign.Start,
  // 所有子组件在Flex容器交叉轴上的对齐格式,只针对单行
  alignItems: ItemAlign.Auto,
  // 交叉轴中有额外的空间时，多行内容的对齐方式
  alignContent: FlexAlign.Start,
  // 所有子组件在Flex容器主轴或交叉轴的间距
  space: {
      main: LengthMetrics.px(50),
      cross: LengthMetrics.px(50)
  }
}){
    Flex子组件
}

Flex() {
  Text('flexBasis(100)')
    .flexBasis(100) // 这里表示宽度为100vp
    .height(100)
    .backgroundColor(0xF5DEB3)
    .textAlign(TextAlign.Center)
  Text(`flexBasis('auto')`)
    .flexBasis('auto') // 这里表示宽度保持原本设置的60%的宽度
    .width('60%')
    .height(100)
    .backgroundColor(0xD2B48C)
    .textAlign(TextAlign.Center)
}.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE)

//下面的案例中，如果两个子组件都没有设置宽度，则第一个占2份，第2个占1份
// 如果设置宽度，则Flex容器减去两个子组件的宽度总和后的剩余空间，再按份数分配给子组件
Flex() {
  Text('flexGrow(2)')
    .flexGrow(2) // 父容器分配给该Text的宽度为剩余宽度的2/3
    // .width(50)
    .height(100)
    .backgroundColor(0xF5DEB3)
    .textAlign(TextAlign.Center)
  Text('flexGrow(1)')
    .flexGrow(1) // 父容器分配给该Text的宽度为剩余宽度的1/3
    .height(100)
    .backgroundColor(0xD2B48C)
    .textAlign(TextAlign.Center)
}.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE)

// flexShrink()表示该元素的压缩比例，基于超出的总尺寸进行计算
// 第一个text压缩比例是0,另外两个都是1,因此放不下时等比例压缩后两个,第一个不压缩
Flex({ direction: FlexDirection.Row }) {
  Text('flexShrink(0)')
    .flexShrink(0)
    .width('50%')
    .height(100)
    .backgroundColor(0xF5DEB3)
    .textAlign(TextAlign.Center)
  Text('default flexShrink') // 默认值为1
    .width('40%')
    .height(100)
    .backgroundColor(0xD2B48C)
    .textAlign(TextAlign.Center)
  Text('flexShrink(1)')
    .flexShrink(1)
    .width('40%')
    .height(100)
    .backgroundColor(0xF5DEB3)
    .textAlign(TextAlign.Center)
}.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE)

// alignSelf会覆盖Flex布局容器中的alignItems设置
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) {
  Text('no alignSelf,height:70')
    .width('33%')
    .height(70)
    .backgroundColor(0xF5DEB3)
    .textAlign(TextAlign.Center)
  Text('alignSelf End')
    .alignSelf(ItemAlign.End)
    .width('33%')
    .height(70)
    .backgroundColor(0xD2B48C)
    .textAlign(TextAlign.Center)
  Text('no alignSelf,height:100%')
    .width('34%')
    .height('100%')
    .backgroundColor(0xF5DEB3)
    .textAlign(TextAlign.Center)
}.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE)