在前两个章节中，我们接触了Text文本视图和Image图片视图的使用方法，当界面中存在多个Text文本视图或者Image图片视图，或者是同时存在不同类型的视图时，我们又该如何去构建一个复杂的页面呢？

ArkUI提供了容器视图的概念，容器视图就像一个"盒子"，我们可以将多个元素放在里面，并且规定这些元素的位置，如此就可以实现一个丰富的页面布局。

Column垂直布局容器

ArkUI中提供界面布局容器主要有Column垂直布局容器、Row水平布局容器、Stack堆叠布局容器、Flex弹性布局容器4种常见类型。

首先是Column垂直布局容器，我们在界面中放置2个Text文本视图，并使用Column垂直布局容器使其按照垂直方向排列，如下代码所示：

scss 复制代码

Column(){
  Text('ArkUI极简开发')
    .fontSize(23)
    .fontColor('#333333')
  Text('ArkUI是一套构建分布式应用界面的声明式UI开发框架。')
    .fontSize(17)
    .fontColor('#999999')
}

我们为两个Text文本视图设置不同的字号和颜色，实现常规界面中的显示主副标题的效果。Column垂直布局容器中默认按照居中对齐方式排布内部的元素，我们也可以设置其参数来调整容器内元素的对齐方式，如下代码所示：

scss 复制代码

Column(){
  // 多个视图
}
.alignItems(HorizontalAlign.Start)

上述代码中，我们为Column垂直布局容器添加了alignItems修饰器，设置参数HorizontalAlign水平对齐方向为Start，实现容器内元素左对齐的效果。

是不是想起了前面章节中提及的textAlign修饰器了？是的，alignItems修饰器的对齐方式从左到右也是Start、Center、End。

在预览窗口中我们发现元素之间的间距太近了，我们可以直接设置Column垂直布局容器内部的space参数类设置容器内元素之间的间距，如下代码所示：

scss 复制代码

Column({space:20}){
  // 多个视图
}

最后，如果我们仍然希望整个Column垂直布局容器在界面中居中显示，我们可以使用justifyContent修饰器来调整容器的位置，如下代码所示：

less 复制代码

Column({space:20}){
  // 多个视图
}
.height('100%')
.justifyContent(FlexAlign.Center)
.padding(20)

上述代码中，我们首先使用了height修饰器设置容器的高度覆盖整个屏幕，然后通过设置justifyContent修饰器，使得该容器的在垂直方向的对齐方式为Center居中对齐。最后为了让元素距离屏幕两边留有间距，我们使用padding修饰器来设置四周的间距。

Row水平布局容器

Row水平布局容器的用法与Column垂直布局容器的用法类似，我们可以先导入一张图片到media文件夹中（详情参考上一章节的内容），然后使用Row水平布局容器将排布图片和文字，如下代码所示：

scss 复制代码

Row({ space: 20 }) {
  // 图片
  Image($r('app.media.img_logo'))
    .objectFit(ImageFit.Cover)
    .width(60)
    .height(60)
    .borderRadius(8)

  // 文字
  Text('ArkUI极简开发')
    .fontSize(23)
    .fontColor('#333333')
}

上述代码中，我们设置了Row水平布局容器的space参数值为20，使得内部横向排布的元素之间留有间距。然后在Row水平布局容器的闭包中放置了Image图片视图和Text文本视图，实现多个视图横向排布的效果。

让Row水平布局容器位于页面中间的方式也很类似，设置高度为100%即可，如下代码所示：

less 复制代码

Row({ space: 20 }) {
  // 多个视图
}
.height('100%')
.padding(20)

不错，那如果我们希望两个文本垂直排布，并且最后和图片横向排布又如何实现呢？也很简单，将Row水平布局容器的用法与Column垂直布局容器配合使用，如下代码所示：

scss 复制代码

Row({ space: 10 }) {
  // 图片
  Image($r('app.media.img_logo'))
    .objectFit(ImageFit.Cover)
    .width(60)
    .height(60)
    .borderRadius(8)

  // 文字
  Column({space:5}) {
    Text('ArkUI极简开发')
      .fontSize(17)
      .fontColor('#333333')
    Text('ArkUI是一套构建分布式应用界面的声明式UI开发框架。')
      .fontSize(14)
      .fontColor('#999999')
  }
  .alignItems(HorizontalAlign.Start)
  .width('100%')
}
.height('100%')
.padding({left:10,right:80})

上述代码中，文字部份我们使用了Column垂直布局容器排布了2个文本视图，并设置对齐方式为左对齐，宽度为100%。然后使用Row水平布局容器将文本视图所在的容器与Image图片视图相组合，通过设置高度使其居中对齐，最后使用padding修饰器留出两边的间距。

本章小结

垂直布局和水平布局是UI设计中最为常见的2种布局方式，在分析页面布局时，开发者的首要工作是拆解元素之间的布局，如同案例所示，界面中的3个元素，2个文本视图可以垂直排布组成一个复合视图，再由这个复合视图与图片视图相排布。

编程技术固然重要，但良好的编程设计思路，能让人在开发过程中效率更高。

因此，多想多做，先想后做，才能更好地掌握ArkUI的精髓。

ArkUI极简教程03：容器视图的使用（上）

Column垂直布局容器

Row水平布局容器

本章小结