目录
前言
在学习本章之前,如果你对一些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竖着排列的组件。那么,如何让组件进行横向排列呢?