从零开始的Flutter入门实战（二）

目录

前言

一、Column布局

1.创建一个Column

2.添加Container

 3.运行验证

二、Row布局

1.将Column改成Row

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

1.SizedBox的巧妙使用

2.构建两种布局

3.添加盒子

4.运行效果

5.再添加一个Row布局

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

总结

---

前言

在学习本章之前，如果你对一些flutter基础不是很了解，可以先看一下这篇文章，效果可能会更好一些新手入门需要知道的Flutter基础_佑一山的博客-CSDN博客 

还有回顾第一章节的内容从零开始的Flutter入门实战_佑一山的博客-CSDN博客

本章节将对我们的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竖着排列的组件。那么，如何让组件进行横向排列呢？