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

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

线性布局

垂直布局（Column）

官方文档： 

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

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

 参数表：

 代码部分：

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

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开发者

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

 代码部分：

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

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 }) // 设置这个参数之后才有换行效果

参数表：

 代码部分：

在以下代码中第一个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(数字)属性，数字越大，层级越高， 

参数表：

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

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

第二种是通过属性设置：

Stack(){

// 子组件...

}

.alignContent(Alignment.Center)

 

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

如图：

  代码部分：

这里一共有三个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()
}

 效果展示：

ArkUI内容持续更新中........