鸿蒙ArkUI之布局实战，线性布局（Column,Row）、弹性布局(Flex)、层叠布局(Stack)，详细用法

本文聚焦于ArkUI的布局实战，三种十分重要的布局，线性布局、弹性布局、层叠布局，在实际开发过程中这几种布局方法都十分常见，下面直接上手

线性布局

垂直布局（Column）

官方文档：

Column-行列与堆叠-ArkTS组件-ArkUI（方舟UI框架）-应用框架 - 华为HarmonyOS开发者

沿垂直方向布局的容器，在此容器中，所有子组件都会沿着垂直方向排列，也就数从上往下排

参数表：

参数名	类型	必填	说明
space	string \| number	否	纵向布局元素垂直方向间距。从API version 9开始，space为负数或者justifyContent设置为FlexAlign.SpaceBetween、FlexAlign.SpaceAround、FlexAlign.SpaceEvenly时不生效。默认值：0 单位：vp 说明：可选值为大于等于0的数字，或者可以转换为数字的字符串。

参数名

类型

必填

说明

space

string | number

否

纵向布局元素垂直方向间距。

从API version 9开始，space为负数或者justifyContent设置为FlexAlign.SpaceBetween、FlexAlign.SpaceAround、FlexAlign.SpaceEvenly时不生效。

默认值：0

单位：vp

说明：

可选值为大于等于0的数字，或者可以转换为数字的字符串。

代码部分：

在垂直布局中，有两个十分重要的属性：

属性名	功能描述	参数类型	参数说明	默认值
alignItems	设置子组件在水平方向上的对齐	HorizontalAlign	子组件在水平方向上的对齐格式	HorizontalAlign.Center
justifyContent	设置子组件在垂直方向上的对齐	FlexAlign	子组件在垂直方向上的对齐格式	FlexAlign.Start

import { getRandomRGBA } from '../../../Utils'

@Entry
@Component
struct ColumnCase {
  build() {
    NavDestination() {
      Column({ space: 30 }) {
        Text('垂直布局')
          .fontSize(24)
          .fontWeight(FontWeight.Bold)
        Column({ space: 10 }) {
          ForEach(Array.from({ length: 10 }), () => {
            Text()
              .backgroundColor(getRandomRGBA())
              .width(200)
              .height(20)
          })
        }
        .justifyContent(FlexAlign.Center)
        .alignItems(HorizontalAlign.Center)
      }
      .height('100%')
      .width('100%')
    }
  }
}

@Builder
function ColumnCaseBuilder() {
  ColumnCase()
}

可以看到在背景色部分我使用了一个函数生成随机的颜色，这个函数如下：

// 随机生成rgba颜色
export const getRandomRGBA = () => {
  const r = Math.floor(Math.random() * 256);
  const g = Math.floor(Math.random() * 256);
  const b = Math.floor(Math.random() * 256);
  return `rgba(${r}, ${g}, ${b}, ${1})`;
}

效果展示：

水平布局（Row）

官方文档：

Row-行列与堆叠-ArkTS组件-ArkUI（方舟UI框架）-应用框架 - 华为HarmonyOS开发者

沿水平方向布局容器，这个组件中的子组件会沿着水平方向排列，参数表：

参数名	类型	必填	说明
space	number \| string	否	横向布局元素间距。从API version 9开始，space为负数或者justifyContent设置为FlexAlign.SpaceBetween、FlexAlign.SpaceAround、FlexAlign.SpaceEvenly时不生效。默认值：0，单位vp 说明：可选值为大于等于0的数字，或者可以转换为数字的字符串。

参数名

类型

必填

说明

space

number | string

否

横向布局元素间距。

从API version 9开始，space为负数或者justifyContent设置为FlexAlign.SpaceBetween、FlexAlign.SpaceAround、FlexAlign.SpaceEvenly时不生效。

默认值：0，单位vp

说明：

可选值为大于等于0的数字，或者可以转换为数字的字符串。

代码部分：

在水平布局容器中也有两个十分重要的属性：

属性名	功能描述	参数类型	是否必填	参数说明	默认值
alignItems	设置子组件在垂直方向上的对齐	VerticalAlign	是	子组件在垂直方向上的对齐格式	VerticalAlign.Center
justifyContent	设置子组件在水平方向上的对齐	FlexAlign	是	子组件在水平方向上的对齐格式	FlexAlign.Start

import { getRandomRGBA } from '../../../Utils'

@Entry
@Component
struct RowCase {
  build() {
    NavDestination() {
      Column({ space: 30 }) {
        Text('水平布局')
          .fontSize(24)
          .fontWeight(FontWeight.Bold)
        Row({ space: 10 }) {
          ForEach(Array.from({ length: 20 }), () => {
            Text()
              .backgroundColor(getRandomRGBA())
              .width(40)
              .height(200)
          })
        }
        .justifyContent(FlexAlign.Center)
        .alignItems(VerticalAlign.Center)
      }
      .height('100%')
      .width('100%')
    }
  }
}

@Builder
function RowCaseBuilder() {
  RowCase()
}

效果展示：

弹性布局（Flex）

官方文档：

Flex-行列与堆叠-ArkTS组件-ArkUI（方舟UI框架）-应用框架 - 华为HarmonyOS开发者

Flex是以弹性方式布局子组件的容器组件，提供更加有效的方式对容器内的子元素进行排列、对齐和分配剩余空间，也就是子组件会随着容器宽度的限制而自动换行，不会挤在一块，但是使用的时候需要加上一个参数使用，才能达到换行的效果，就是：

Flex({ wrap: FlexWrap.Wrap }) // 设置这个参数之后才有换行效果

参数表：

名称	类型	必填	说明
direction	FlexDirection	否	子组件在Flex容器上排列的方向，即主轴的方向。默认值： FlexDirection.Row 卡片能力：从API version 9开始，该接口支持在ArkTS卡片中使用。
wrap	FlexWrap	否	Flex容器是单行/列还是多行/列排列。默认值： FlexWrap.NoWrap 说明：在多行布局时，通过交叉轴方向，确认新行堆叠方向。卡片能力：从API version 9开始，该接口支持在ArkTS卡片中使用。
justifyContent	FlexAlign	否	所有子组件在Flex容器主轴上的对齐格式。默认值： FlexAlign.Start 卡片能力：从API version 9开始，该接口支持在ArkTS卡片中使用。
alignItems	ItemAlign	否	所有子组件在Flex容器交叉轴上的对齐格式。默认值： ItemAlign.Start 卡片能力：从API version 9开始，该接口支持在ArkTS卡片中使用。
alignContent	FlexAlign	否	交叉轴中有额外的空间时，多行内容的对齐方式。仅在wrap为Wrap或WrapReverse下生效。默认值： FlexAlign.Start 卡片能力：从API version 9开始，该接口支持在ArkTS卡片中使用。
space12+	FlexSpaceOptions12+	否	所有子组件在Flex容器主轴或交叉轴的间距。默认值： {main:LengthMetrics.px(0), cross:LengthMetrics.px(0)} space为负数、百分比或者justifyContent设置为FlexAlign.SpaceBetween、FlexAlign.SpaceAround、FlexAlign.SpaceEvenly时不生效。元服务API：从API version 12开始，该接口支持在元服务中使用。

代码部分：

在以下代码中第一个Flex组件没有设置Wrap参数，子组件就会直接默认水平排列，而第二个Flex设置了Wrap参数，子组件就可以自动换行：

import { getRandomRGBA } from '../../../Utils'

@Entry
@Component
struct FlexCase {
  build() {
    NavDestination() {
      Column({ space: 30 }) {
        Text('弹性布局')
          .fontSize(24)
          .fontWeight(FontWeight.Bold)

        Flex() {
          ForEach(Array.from({ length: 10 }), () => {
            Text()
              .backgroundColor(getRandomRGBA())
              .width(60)
              .margin({ right: 20, bottom: 20 })
              .height(30)
          })
        }

        Flex({ wrap: FlexWrap.Wrap }) {
          ForEach(Array.from({ length: 10 }), () => {
            Text()
              .backgroundColor(getRandomRGBA())
              .width(60)
              .margin({ right: 20, bottom: 20 })
              .height(30)
          })
        }
      }
      .height('100%')
      .width('100%')
    }
  }
}

@Builder
function FlexCaseBuilder() {
  FlexCase()
}

效果展示：

层叠布局（Stack）

官方文档：

Stack-行列与堆叠-ArkTS组件-ArkUI（方舟UI框架）-应用框架 - 华为HarmonyOS开发者

Stack组件中的子组件会堆叠在一起，默认都是居中对齐，遵循后来居上的原则，如果需要设置层级，可给子组件设置zIndex(数字)属性，数字越大，层级越高，

参数表：

参数名	类型	必填	说明
alignContent	Alignment	否	设置子组件在容器内的对齐方式。默认值：Alignment.Center

参数名

类型

必填

说明

alignContent

Alignment

否

设置子组件在容器内的对齐方式。

默认值：Alignment.Center

Stack组件设置组件对齐的方式有两种，一种是通过参数设置：

Stack(value?: { alignContent?: Alignment })

第二种是通过属性设置：

Stack(){

// 子组件...

}

.alignContent(Alignment.Center)

两种方式都选一种即可，对齐方式分为九种，如下：

对齐位置	枚举值	说明
左上	Alignment.TopStart	左上角对齐
上边居中	Alignment.Top	上边居中对齐
右上	Alignment.TopEnd	右上角对齐
左边居中	Alignment.Start	左边居中对齐
中心	Alignment.Center	中心对齐
右边居中	Alignment.End	右边居中对齐
左下	Alignment.BottomStart	左下角对齐
下边居中	Alignment.Bottom	下边居中对齐
右下	Alignment.BottomEnd	右下角对齐

如图：

代码部分：

这里一共有三个Stack组件，第一个小图在左上，第二个默认都居中，第三个在右下，一共放了两张图片，一个在占满，一个显示位置

@Entry
@Component
struct StackCase {
  build() {
    NavDestination() {
      Text('层叠布局')
        .fontSize(24)
        .fontWeight(FontWeight.Bold)
      Column({ space: 20 }) {
        Stack({ alignContent: Alignment.TopStart }) {
          Image($r('app.media.ark_ui'))
            .width(200)
            .height(200)
          Image($r('app.media.avatar'))
            .width(30)
            .height(30)
        }
        .width(200)
        .height(200)

        Stack() {
          Image($r('app.media.ark_ui'))
            .width(200)
            .height(200)
          Image($r('app.media.avatar'))
            .width(30)
            .height(30)
        }
        .width(200)
        .height(200)

        Stack({ alignContent: Alignment.BottomEnd }) {
          Image($r('app.media.ark_ui'))
            .width(200)
            .height(200)
          Image($r('app.media.avatar'))
            .width(30)
            .height(30)
        }
        .width(200)
        .height(200)
      }
      .height('100%')
      .width('100%')
    }
  }
}

@Builder
function StackCaseBuilder() {
  StackCase()
}