鸿蒙ArkTS容器组件：【Flex】

Flex

以弹性方式布局子组件的容器组件。

说明：
开发前请熟悉鸿蒙开发指导文档：gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md点击或者复制转到。

• 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
• Flex组件在渲染时存在二次布局过程，因此在对性能有严格要求的场景下建议使用[Column]、[Row]代替。
• Flex组件主轴默认不设置时撑满父容器，[Column]、[Row]组件主轴不设置时默认是跟随子节点大小。

子组件

可以包含子组件。

接口

Flex(value?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: FlexAlign, alignItems?: ItemAlign, alignContent?: FlexAlign })

标准Flex布局容器。

从API version 9开始，该接口支持在ArkTS卡片中使用。

参数:

参数名	参数类型	必填	默认值	参数描述
direction	[FlexDirection]	否	FlexDirection.Row	子组件在Flex容器上排列的方向，即主轴的方向。
wrap	[FlexWrap]	否	FlexWrap.NoWrap	Flex容器是单行/列还是多行/列排列。 说明： 在多行布局时，通过交叉轴方向，确认新行堆叠方向。
justifyContent	[FlexAlign]	否	FlexAlign.Start	所有子组件在Flex容器主轴上的对齐格式。
alignItems	[ItemAlign]	否	ItemAlign.Start	所有子组件在Flex容器交叉轴上的对齐格式。
alignContent	[FlexAlign]	否	FlexAlign.Start	交叉轴中有额外的空间时，多行内容的对齐方式。仅在wrap为Wrap或WrapReverse下生效。 HarmonyOS与OpenHarmony鸿蒙文档籽料：mau123789是v直接拿

示例

示例1

// xxx.ets
@Entry
@Component
struct FlexExample1 {
  build() {
    Column() {
      Column({ space: 5 }) {
        Text('direction:Row').fontSize(9).fontColor(0xCCCCCC).width('90%')
        Flex({ direction: FlexDirection.Row }) { // 子组件在容器主轴上行布局
          Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)
          Text('2').width('20%').height(50).backgroundColor(0xD2B48C)
          Text('3').width('20%').height(50).backgroundColor(0xF5DEB3)
          Text('4').width('20%').height(50).backgroundColor(0xD2B48C)