上一章节中，我们介绍了Row水平布局容器与Column垂直布局容器的使用方法，这一章节我们再来看看ArkUI中另外2种布局容器--- ---Stack堆叠布局容器、Flex弹性布局容器。

Stack堆叠布局容器

堆叠，简单来说，就是将一个视图放在另一个视图的层级上面。这个"上面"不是指页面中的上下，而是指用户看到"前后"。以海报为例，常规的海报是一张大的背景图片，图片上面有各种文字和其他元素。

我们可以尝试做一个简单的"海报"界面，如下代码所示：

scss 复制代码

Stack(){
  // 图片
  Image($r('app.media.img_bgImage'))
    .objectFit(ImageFit.Cover)

  // 文字
  Text('跨过荆棘，就是金黄的麦田。')
    .fontSize(17)
    .fontColor('#FFFFFF')
    .padding(20)
    .backgroundColor('#409EFF')
    .borderRadius(8)
}

上述代码中，我们使用Stack堆叠布局容器作为父级视图，在其闭包中放置了Image图片视图、Text文本视图。可以看到文字显示在了图片"上面"，并且文字居中显示，这是由于代码书写先后顺序决定的，简答来说就是：先写谁，谁在底部。

根据Stack堆叠布局容器的特性，我们可以结合Row水平布局容器与Column垂直布局容器一起来实现复杂的界面布局效果，如下代码所示：

scss 复制代码

Stack(){
  // 背景图片
  Image($r('app.media.img_cloud'))
    .objectFit(ImageFit.Cover)

  Column({space:60}) {
    Column({space:32}) {
      // 歌曲图片
      Image($r('app.media.img_love'))
        .objectFit(ImageFit.ScaleDown)
        .width('80%')
        .borderRadius(16)

      Column({space:10}) {
        // 歌曲名称
        Text('Love U')
          .fontSize(17)
          .fontColor(Color.White)

        // 歌曲副标题
        Text('How Much I Love You')
          .fontSize(14)
          .fontColor(Color.White)
      }
    }
      // 按钮组
      Row({ space: 20 }) {
        Image($r('app.media.ic_public_play_last'))
          .width(32)
        Image($r('app.media.ic_public_pause'))
          .width(32)
        Image($r('app.media.ic_public_play_next'))
          .width(32)
      }
    }
}

上述代码中，我们使用了Row水平布局容器构建了底部的"按钮组"样式，随后使用Column垂直布局容器构建了与上面"歌曲封面"、"歌曲名称"、"歌曲副标题"。

值得注意的是，由于多个文本视图之间的space不一样，因此我们使用了多个Column垂直布局容器进行嵌套使用。

最后，我们使用Stack堆叠布局容器添加了一个背景图片，让页面显得更加精致些。

Flex弹性布局容器

除了常规的Column垂直、Row横向和Stack堆叠布局之外，ArkUI还提供了一种常用的布局容器--- ---Flex弹性布局容器。

这是一种更加灵活易用的布局容器，可以对内部的视图在X轴、Y轴方向进行弹性排布，并且可以实现根据可用空间的自动伸缩，用于构建更加复杂的布局场景。

比如实现类似Column这样的垂直布局，如下代码所示：

scss 复制代码

Flex({ direction: FlexDirection.Column}){
  Image($r('app.media.img_love'))
    .objectFit(ImageFit.Auto)
    .width(100)
    .borderRadius(8)
  Image($r('app.media.img_love'))
    .objectFit(ImageFit.Auto)
    .width(100)
    .borderRadius(8)
  Image($r('app.media.img_love'))
    .objectFit(ImageFit.Auto)
    .width(100)
    .borderRadius(8)
}

上述代码中，我们使用Flex弹性布局容器，并在其闭包中放置了3个图片视图，可以看到当设置Flex弹性布局容器的参数direction（对齐方向）为FlexDirection.Column（垂直）时，图片视图便以垂直方向进行排布。

如果需要实现横向排布，只需要设置direction参数的值为FlexDirection.Row，便可快速实现横竖转换。如下代码所示：

css 复制代码

Flex({ direction: FlexDirection.Row}){
  // 多个视图
}

Flex弹性布局容器的另一大核心功能，是可以根据当前设备的尺寸自动分配剩余空间。比如我们希望多个图片视图"平均分配"，只需要设置justifyContent参数值，就可以调整元素的空间布局。如下代码所示：

less 复制代码

 Flex({
    direction: FlexDirection.Row,
    justifyContent: FlexAlign.SpaceAround
  }){
   // 多个视图
}

最后，如果我们想让整个弹性视图所包含的内容在页面中"居中显示"，我们可以设置容器高度为全屏，并且设置Flex弹性布局容器中的alignItems参数来实现居中效果。如下代码所示：

less 复制代码

Flex({
  direction: FlexDirection.Row,
  justifyContent: FlexAlign.SpaceAround,
  alignItems: ItemAlign.Center
}) {
  // 多个视图
}
.height('100%')

同理，要实现垂直排布居中效果，只需要设置direction参数的方向为Column，并保证宽度为100%即可，如下代码所示：

less 复制代码

Flex({
  direction: FlexDirection.Column,
  justifyContent: FlexAlign.SpaceAround,
  alignItems: ItemAlign.Center
}) {
  // 多个视图
}
.width('100%')

ArkUI极简教程04：容器视图的使用（下）

Stack堆叠布局容器

Flex弹性布局容器