《ArkUI实战》

# 5.1：线性布局容器（Row、Column）

线性容器类表示按照水平方向或者竖直方向排列子组件的容器，ArkUI开发框架通过 Row 和 Colum 来实现线性布局。

# 5.1.1：主轴和纵轴概念

什么是主轴和纵轴？对于线性容器来说，有主轴和纵轴之分，如果布局是沿水平方向，那么主轴就指水平方向，而纵轴就是垂直方向；如果布局是沿垂直方向，那么主轴就是指垂直方向，而纵轴就是水平方向。

# 5.1.2：Row

Row 按照水平方向布局子组件，主轴为水平方向，纵轴为竖直方向。

# 5.1.2.1：Row定义介绍

interface RowInterface {
  (value?: { space?: string | number }): RowAttribute;
}
1
2
3

  • value：可选参数， space 表示设置 Row 的子组件在水平方向上的间距，简单样例如下所示：

      样例运行结果如5_1所示：

      5_1_1

    # 5.1.2.2：Row属性介绍

    declare class RowAttribute extends CommonMethod<RowAttribute> {
  alignItems(value: VerticalAlign): RowAttribute;
  justifyContent(value: FlexAlign): RowAttribute;
}
    1
    2
    3
    4

    • alignItems：参数类型为 VerticalAlign ，表示子组件在竖直方向上的布局方式， VerticalAlign 定义了以下三种对其方式：

      • Top：设置子组件在竖直方向上居顶部对齐。
      • Center（默认值）：设置子组件在竖直方向上居中对其。
      • Bottom：设置子组件在竖直方向上居底部对齐。

      简单样例如下所示：

        样例运行结果如下图所示：

        5_1_2

      • justifyContent：设置子组件在水平方向上的对齐方式， FlexAlign 定义了一下几种类型：

        • Start：元素在主轴方向首端对齐, 第一个元素与行首对齐，同时后续的元素与前一个对齐。
        • Center：元素在主轴方向中心对齐，第一个元素与行首的距离与最后一个元素与行尾距离相同。
        • End：元素在主轴方向尾部对齐, 最后一个元素与行尾对齐，其他元素与后一个对齐。
        • SpaceBetween：主轴方向均匀分配弹性元素，相邻元素之间距离相同。 第一个元素与行首对齐，最后一个元素与行尾对齐。
        • SpaceAround：主轴方向均匀分配弹性元素，相邻元素之间距离相同。 第一个元素到行首的距离和最后一个元素到行尾的距离时相邻元素之间距离的一半。
        • SpaceEvenly：主轴方向元素等间距布局， 相邻元素之间的间距、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。

        简单样例如下所示：

          样例运行结果如下图所示：

          5_1_2_2_2

          📢：如果 Row 设置了 space 参数，则 justifyContent 参数不起作用。

        # 5.1.3：Column

        Column 按照竖直方向布局子组件，主轴为竖直方向，纵轴为水平方向。

        # 5.1.3.1：Column定义介绍

        interface ColumnInterface {
  (value?: { space?: string | number }): ColumnAttribute;
}
        1
        2
        3
        • value：可选参数， space 表示设置 Column 的子组件在竖直方向上的间距，参数和 Row 一样，读者可类比 Row 来理解，具体用法就不再介绍了。

        # 5.1.3.2：Column属性介绍

        declare class ColumnAttribute extends CommonMethod<ColumnAttribute> {
  alignItems(value: HorizontalAlign): ColumnAttribute;
  justifyContent(value: FlexAlign): ColumnAttribute;
}
        1
        2
        3
        4

        • alignItems：设置子组件在水平方向上的布局方式， HorizontalAlign 定义了以下三种对其方式：

          • Start：设置子组件在水平方向上按照语言方向起始端对齐。
          • Center（默认值）：设置子组件在水平方向上居左对齐。
          • End：设置子组件在水平方向上按照语言方向末端对齐。

          简单样例如下图所示：

            样例运行结果如下图所示：

            5_1_3_2_1

          • justifyContent：设置子组件在竖直方向上的对齐方式， FlexAlign 定义了一下几种类型：

            • Start：元素在主轴方向首端对齐, 第一个元素与行首对齐，同时后续的元素与前一个对齐。
            • Center：元素在主轴方向中心对齐，第一个元素与行首的距离与最后一个元素与行尾距离相同。
            • End：元素在主轴方向尾部对齐, 最后一个元素与行尾对齐，其他元素与后一个对齐。
            • SpaceBetween：元素在主轴方向均匀分配弹性元素，相邻元素之间距离相同。 第一个元素与行首对齐，最后一个元素与行尾对齐。
            • SpaceAround：元素在主轴方向均匀分配弹性元素，相邻元素之间距离相同。 第一个元素到行首的距离和最后一个元素到行尾的距离时相邻元素之间距离的一半。
            • SpaceEvenly：元素在主轴方向元素等间距布局， 相邻元素之间的间距、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。

            简单样例如下所示：

              样例运行结果如下图所示：

              5_1_3_2_2

              📢：如果 Column 设置了 space 参数，则 justifyContent 参数不起作用。

            # 5.1.4：Blank

            Blank 表示空白填充组件，它用在 Row 和 Column 组件内来填充组件在主轴方向上的剩余尺寸的能力。

            # 5.1.4.1：Blank定义介绍

            interface BlankInterface {
  (min?: number | string): BlankAttribute;
}
            1
            2
            3
            • min： Blank 组件在容器主轴上的最小尺寸。

            # 5.1.4.2：Blank属性介绍

            declare class BlankAttribute extends CommonMethod<BlankAttribute> {
  color(value: ResourceColor): BlankAttribute;
}
            1
            2
            3
            • color：设置空白填充的填充颜色。

            Blank 组件简单样例如下所示：

              样例运行结果如下图所示：

              5_1_4_2_1

              📢： Blank 具有以下特性：

              • 只在 Row 和 Column 中生效。
              • 除了 color 外不支持通用属性。
              • 只在 Row 和 Column 有剩余空间才生效。
              • 适合用在多设备适配场景中。

              # 5.1.5：小结

              本节介绍了线性容器布局里的主轴和纵轴的概念以及 Column 和 Row 的使用方法，读者可以借助线性容器组件实现简单的UI布局了，最后主要注意的是 Column 和 Row 的 space 和 justifyContent 参数不能混用。

              (adsbygoogle = window.adsbygoogle || []).push({});

              ← 5.2：弹性布局容器（Flex） →

              请作者喝杯咖啡
              ©arkui.club版权所有，禁止私自转发、克隆网站。

              欢迎加入鸿蒙技术交流群：695438501

              津公网安备 12011402001367号

              津ICP备2020008934号-2

              中央网信办互联网违法和不良信息举报中心

              天津市互联网违法和不良信息举报中心