HarmonyOS Next 之-布局之弹性布局（Flex）

弹性布局（Flex）提供更加有效的方式对容器中的子元素进行排列、对齐和分配剩余空间。容器默认存在主轴与交叉轴，子元素默认沿主轴排列，子元素在主轴方向的尺寸称为主轴尺寸，在交叉轴方向的尺寸称为交叉轴尺寸。弹性布局在开发场景中用例特别多，比如页面头部导航栏的均匀分布、页面框架的搭建、多行数据的排列等等。

官方文档： https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-layout-development-flex-layout-V5

大致总结一下：

布局方向（FlexDirection）

• FlexDirection.Row（默认值）：主轴为水平方向，子组件从起始端沿着水平方向开始排布
• FlexDirection.RowReverse：主轴为水平方向，子组件从终点端沿着FlexDirection. Row相反的方向开始排布
• FlexDirection.Column：主轴为垂直方向，子组件从起始端沿着垂直方向开始排布
• FlexDirection.ColumnReverse：主轴为垂直方向，子组件从终点端沿着FlexDirection. Column相反的方向开始排布

布局换行（wrap）

• FlexWrap. NoWrap（默认值）：不换行。如果子组件的宽度总和大于父元素的宽度，则子组件会被压缩宽度
• FlexWrap. Wrap：换行，每一行子组件按照主轴方向排列
• FlexWrap. WrapReverse：换行，每一行子组件按照主轴反方向排列。

主轴对齐方式（justifyContent）

• FlexAlign.Start（默认值）：子组件在主轴方向起始端对齐， 第一个子组件与父元素边沿对齐，其他元素与前一个元素对齐
• FlexAlign.Center：子组件在主轴方向居中对齐。
• FlexAlign.End：子组件在主轴方向终点端对齐, 最后一个子组件与父元素边沿对齐，其他元素与后一个元素对齐
• FlexAlign.SpaceBetween：Flex主轴方向均匀分配弹性元素，相邻子组件之间距离相同。第一个子组件和最后一个子组件与父元素边沿对齐
• FlexAlign.SpaceAround：Flex主轴方向均匀分配弹性元素，相邻子组件之间距离相同。第一个子组件到主轴起始端的距离和最后一个子组件到主轴终点端的距离是相邻元素之间距离的一半
• FlexAlign.SpaceEvenly：Flex主轴方向元素等间距布局，相邻子组件之间的间距、第一个子组件与主轴起始端的间距、最后一个子组件到主轴终点端的间距均相等

交叉轴对齐方式（alignItems）

• ItemAlign.Auto：使用Flex容器中默认配置
• ItemAlign.Start：交叉轴方向首部对齐。
• ItemAlign.End：交叉轴方向底部对齐
• ItemAlign.Stretch：交叉轴方向拉伸填充，在未设置尺寸时，拉伸到容器尺寸
• ItemAlign. Baseline：交叉轴方向文本基线对齐

子组件设置交叉轴对齐

子组件的alignSelf属性也可以设置子组件在父容器交叉轴的对齐格式，且会覆盖Flex布局容器中alignItems配置。

Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) { 
    // 容器组件设置子组件居中  
    Text('alignSelf Start')
    .width('25%')
    .height(80)    
    .alignSelf(ItemAlign.Start)
    .backgroundColor(0xF5DEB3)
    Text('alignSelf Baseline')
    .alignSelf(ItemAlign.Baseline)
    .width('25%')    
    .height(80)    
    .backgroundColor(0xD2B48C)
    Text('alignSelf Baseline')
    .width('25%')
    .height(100)
    .backgroundColor(0xF5DEB3)
    .alignSelf(ItemAlign.Baseline)
    Text('no alignSelf')
    .width('25%')
    .height(100)
    .backgroundColor(0xD2B48C)
    Text('no alignSelf')
    .width('25%')
    .height(100)
    .backgroundColor(0xF5DEB3)
}
.width('90%')
.height(220)
.backgroundColor(0xAFEEEE)

内容对齐（alignContent）

• FlexAlign.Start：子组件各行与交叉轴起点对齐
• FlexAlign.Center：子组件各行在交叉轴方向居中对齐
• FlexAlign.End：子组件各行与交叉轴终点对齐。
• FlexAlign.SpaceBetween：子组件各行与交叉轴两端对齐，各行间垂直间距平均分布
• FlexAlign.SpaceAround：子组件各行间距相等，是元素首尾行与交叉轴两端距离的两倍
• FlexAlign.SpaceEvenly: 子组件各行间距，子组件首尾行与交叉轴两端距离都相等

自适应拉伸

在弹性布局父组件尺寸不够大的时候，通过子组件的下面几个属性设置其在父容器的占比，达到自适应布局能力。

• flexBasis：设置子组件在父容器主轴方向上的基准尺寸。如果设置了该值，则子项占用的空间为设置的值；如果没设置该属性，那子项的空间为width/height的值 例如：

Flex() {  
    Text('flexBasis("auto")')
    .flexBasis('auto') 
    // 未设置width以及flexBasis值为auto，内容自身宽度    
    .height(100)
    .backgroundColor(0xF5DEB3)
    Text('flexBasis("auto")' + ' width("40%")')
    .width('40%')
    .flexBasis('auto')
    //设置width以及flexBasis值auto，使用width的值
    .height(100)
    .backgroundColor(0xD2B48C)
  Text('flexBasis(100)')
  // 未设置width以及flexBasis值为100，宽度为100vp
  .fontSize(15)
  .flexBasis(100)
  .height(100)
  .backgroundColor(0xF5DEB3)
  Text('flexBasis(100)')
  .fontSize(15)
  .flexBasis(100)
  .width(200)
  // flexBasis值为100，覆盖width的设置值，宽度为100vp
  .height(100)
  .backgroundColor(0xD2B48C)
}
  .width('90%')
  .height(120)
  .padding(10)
  .backgroundColor(0xAFEEEE)

• flexGrow：设置父容器的剩余空间分配给此属性所在组件的比例。用于“瓜分”父组件的剩余空间

Flex() {
    Text('flexGrow(2)')
    .flexGrow(2)
    .width(100)
    .height(100)
    .backgroundColor(0xF5DEB3)
Text('flexGrow(3)')
.flexGrow(3)
.width(100)
.height(100)
.backgroundColor(0xD2B48C)
Text('no flexGrow')
.width(100)
.height(100)
.backgroundColor(0xF5DEB3)
    
}
.width(420)
.height(120)
.padding(10)
.backgroundColor(0xAFEEEE)

• flexShrink: 当父容器空间不足时，子组件的压缩比例

Flex({ direction: FlexDirection.Row }) {
    Text('flexShrink(3)')
    .fontSize(15)
    .flexShrink(3)
    .width(200)
    .height(100)
    .backgroundColor(0xF5DEB3)
  Text('no flexShrink')
  .width(200)
  .height(100)
  .backgroundColor(0xD2B48C)
  Text('flexShrink(2)')
  .flexShrink(2)
  .width(200)
  .height(100)
  .backgroundColor(0xF5DEB3)
    
}
.width(400)
.height(120)
.padding(10)
.backgroundColor(0xAFEEEE)