如何在鸿蒙开发中使用 Flex 布局？

Question

鸿蒙中的flex布局和平常前端开发的一样吗？

Answer 1

不太一样。使用 Flex 布局的基本步骤和常见属性设置：
1、创建flex容器：首先要设置为容器。例如在 TS 中：

<Flex containerStyle="{{flexContainerStyle}}">
    <!-- 子组件 -->
</Flex>

import { FlexAlign, FlexDirection } from '@ohos/uikit';
export default {
    data: {
        flexContainerStyle: {
            flexDirection: FlexDirection.Row, // 设置主轴方向，这里是水平方向
            justifyContent: FlexAlign.Center, // 主轴上的对齐方式，这里是居中
            alignItems: FlexAlign.Center // 交叉轴上的对齐方式，这里是居中
        }
    }
}

2、设置主轴方向（flexDirection）：决定主轴的方向，即子元素的排列方向：

• FlexDirection.Row：水平方向从左到右排列（默认值）。
• FlexDirection.RowReverse：水平方向从右到左排列。
• FlexDirection.Column：垂直方向从上到下排列。
• FlexDirection.ColumnReverse：垂直方向从下到上排列。

3、设置主轴上的对齐方式（justifyContent）：定义了子元素在主轴上的对齐方式：

• FlexAlign.Start：左对齐或上对齐（根据主轴方向）。
• FlexAlign.End：右对齐或下对齐（根据主轴方向）。
• FlexAlign.Center：居中对齐。
• FlexAlign.SpaceBetween：两端对齐，子元素之间的间隔都相等。
• FlexAlign.SpaceAround：每个子元素两侧的间隔相等，所以子元素之间的间隔比子元素与容器边框的间隔大一倍。

4、设置交叉轴上的对齐方式（alignItems）：定义了子元素在交叉轴上的对齐方式：

• FlexAlign.Start：交叉轴起点对齐。
• FlexAlign.End：交叉轴终点对齐。
• FlexAlign.Center：交叉轴居中对齐。
• FlexAlign.Stretch：拉伸（默认值），如果子元素在交叉轴方向没有设置固定尺寸，将拉伸以填满交叉轴空间。

5、设置子元素的伸缩性（flexGrow）：定义子元素的伸缩性，即当主轴有剩余空间时，子元素如何分配这些空间。值为数字，默认为 0，表示不伸缩。

<Flex containerStyle="{{flexContainerStyle}}">
    <Text style="{{textStyle1}}">子元素1</Text>
    <Text style="{{textStyle2}}">子元素2</Text>
</Flex>

export default {
    data: {
        flexContainerStyle: {
            flexDirection: FlexDirection.Row
        },
        textStyle1: {
            flexGrow: 1 // 子元素1会按比例伸缩填充剩余空间
        },
        textStyle2: {
            flexGrow: 2 // 子元素2伸缩比例是子元素1的两倍
        }
    }
}