前言

在学习本章之前，如果你对一些flutter基础不是很了解，可以先看一下这篇文章，效果可能会更好一些

还有回顾第一章节的内容

本章节将对我们的body主体部分进行简单的布局讲解

一、Column布局

1.创建一个Column

我们在title下面创建一个body部分，这就是我们app的主体部分，接下来我们就可以开始编写我们app的主要内容了。我们试想一下，一个app上的图片文字这些组件一定是排列得整整齐齐的，不会全部杂糅在一起，那么我们要如何去给我们显示的画面规定它的位置（布局）呢，那么我们先试着创建一个Column。Column有一个children的属性，让我们敲出来，children是一个类似于集合的东西，它可以并列存放多个Widget。

2.添加Container

在Column的children中，我们添加了3个Container,那么Container是什么？其实它是一个盒子，它也是一个Widget，在这里我们给这个盒子设置它的长和宽均为100，并且设置了它的颜色。

3.运行验证

我们运行以后可以发现，我们的盒子被竖着排列了出来，并且排列得顺序是按照我们代码的顺序（黄，黑，绿），现在我们知道了，Column实际上就是将我们的Widget竖着排列的组件。那么，如何让组件进行横向排列呢？

二、Row布局

1.将Column改成Row

当我们将Column改成Row以后，系统没有报错，这说明，我们Row的用法实际上和Column的用法是一致的。

2.运行验证

我们运行后发现，原本竖着排列的盒子，现在横向排列了，没错，我们的 Row 就是横向布局的Widget。排列的顺序也和代码的顺序一致。

三、Column布局和Row布局的混合使用

既然我们已经知道了如何竖着和横着进行布局，那么我们接下来就要试一下，将两种布局结合起来使用会是什么效果。

1.SizedBox的巧妙使用

在进行混合使用布局之前，我们来说一下SizeBox，我们的三个盒子之间离得太近觉得不好看，怎么办，我们可以试试用SizedBox将盒子之间隔开看看。

我们可以设置SizedBox的宽和高，这里因为是横向布局，所以我们只需要设置它的宽度就可以了。

这样子，我们的盒子之间就有了10的间距，这个间距是一个透明的SizedBox来填充的。实际上在flutter中也有专门的属性，像padding来设置我们的间距。这里只是展示了其中一种方法。

2.构建两种布局

让我们回到最初的样子，在body中先放一个竖向的布局Column，在它的children里面再放一个横向的布局Row。

3.添加盒子

我们在Row里面来添加两个盒子，并且用一个SizedBox来隔开两个盒子。

4.运行效果

5.再添加一个Row布局

给这个新的Row布局也添加上我们的盒子，并且控制它们之间的间距。

我们再次运行看看

我们发现这一次的盒子放在了我们的第二行靠近中间的位置。

6.实践——再添加一个盒子，让盒子在第三行中间显示

看到这里，我希望你已经明白了这两种布局的使用方法，并且知道如何利用我们的SizedBox来控制盒子之间的间隔。

那么接下来你可以自己动手试一试如何再添加一个盒子，来让盒子在第三行显示，形成一个三角形。

这里我将结果发出来，看看你是不是也是这样完成的

总结

以上就是今天要讲的内容，本文仅仅简单介绍了Column布局和Row布局，而在flutter当中还提供了其他的布局方式，在本章节中，我们先介绍最基本的两种布局，之后再为大家补齐其他的布局方式。下一次我们将介绍我们一些基础的像图片，按钮这样的组件。