Flutter的基本布局

一起从0开始学习Flutter!

我们之前说过Flutter中都是由组件构成的，组件分成两种，一种是可变状态的Widget继承自StatefulWidget，一种是不可变的Widget继承自StatelessWidget，有什么区别呢？在StatefulWidget中可以通过setState()方法来通知组件来调用自己的build()方法来刷新页面。在StatelessWidget就缺失了setState方法，就固定状态不能改变了。
看下我们原来新建的项目这个页面里就包含了这两种组件的运用，这里的MyApp的整体结构不会发生改变所以直接使用了Stateless的widget来显示页面，但是页面还是会在我们点击按钮的时候点击次数进行了刷新，所以我们需要对MyHomePage继承自StatefulWidget。
Flutter学习总结（九、Flutter的基本布局)

可以看到在StatefulWidget里创建了一个State，在State里我们就包含了setState()和build()方法，当我们调用setState方法的时候就会去刷新一下页面，也就更新了Text里的数据。
了解了可变状态组件后就知道我们是如何进行页面交互的，现在可以看下这个页面如何通过一个个Widget来搭建的。

介绍一下我们常用的布局类，看我们新建项目中的已经包含的Column还有Row和Flex，Wrap，Stack。我们依次对他们进行一个介绍：

Column 子元素垂直排列

将所有子元素按照竖直方向进行排列。
mainAxisAlignment
排列的方式，默认值MainAxisAlignment.start
MainAxisAlignment.start 子元素在顶部垂直排列
MainAxisAlignment.end 子元素在底部垂直排列
MainAxisAlignment.center 子元素在居中垂直排列
MainAxisAlignment.spaceBetween 子元素在空间里均匀的放置
MainAxisAlignment.spaceAround 根据元素的数量平分空间，子元素分别居中。
MainAxisAlignment.spaceEvenly 根据元素的数量+1平分空间，子元素分别居中。

crossAxisAlignment
横向显示的方式，默认值CrossAxisAlignment.center
CrossAxisAlignment.start 子元素靠左边显示
CrossAxisAlignment.center 子元素居中显示
CrossAxisAlignment.end 子元素的靠右边显示
CrossAxisAlignment.stretch 子元素占满横向空间
CrossAxisAlignment.baseline 效果和start是一样的

children
我们需要给其添加的子元素。
其他的不常用属性就不多做介绍了，我们可以在需要的时候来看一下就可以。

Row子元素横向排列

用法与Column一致，只是子元素的排列是按横向排列。

Flex弹性布局

我们打开Column和Row的源码看一下发现这两个布局都是Flex的子类，区别在于给他们的direction设置了不同的方向，用法也是一致的，所以都是用Column和Row来做具体的事情。

Wrap流式布局

作为一个可以多行展示的布局，可以在我们添加元素显示超过一行时可以自动折行。
direction
子元素的排列方式，默认值Axis.horizontal，所有子元素横向排列。
Axis.horizontal 子元素横向排列
Axis.vertical 子元素纵向排列
alignment
子元素的排列方向，默认值WrapAlignment.start，所有子元素左对齐。
WrapAlignment.start 子元素靠左边显示
WrapAlignment.center 子元素居中显示
WrapAlignment.end 子元素的靠右边显示
WrapAlignment.spaceBetween 同WrapAlignment.start相同
WrapAlignment.spaceAround 同WrapAlignment.center相同
WrapAlignment.spaceEvenly 同WrapAlignment.center相同
spacing
两个子元素的间距，默认值是0
runSpacing
自动折行后两行之间的间距，默认值是0
其他的不常用属性就不多做介绍了，我们可以在需要的时候来看一下就可以。
children
我们需要给其添加的子元素。

Stack层叠布局

alignment
未指定定位的子元素默认定位方式，默认值AlignmentDirectional.topStart
AlignmentDirectional.topStart 所有子元素堆叠到左上角
AlignmentDirectional.topCenter 所有子元素堆叠到顶部中间
AlignmentDirectional.topEnd 所有子元素堆叠到顶部右边
AlignmentDirectional.centerStart 所有子元素堆叠到中间的左部
AlignmentDirectional.center 所有子元素堆叠到中间
AlignmentDirectional.centerEnd 所有子元素堆叠到中间的右边
AlignmentDirectional.bottomStart 所有子元素堆叠到底部左侧
AlignmentDirectional.bottomCenter 所有子元素堆叠到底部的中间
AlignmentDirectional.bottomEnd 所有子元素堆叠到底部的右边
fit
用于没有指定位置的子元素占用的空间,默认值StackFit.loose
StackFit.expand 所有子元素占满父空间
StackFit.loose 所有子元素根据指定的大小显示
overflow
如果子组件的大小超过了Stack的大小，是否进行裁切，默认值：Overflow.clip
Overflow.clip 超过的部分将进行裁切
Overflow.visible 超过的部分也会显示出来
children
我们需要给其添加的子元素。

一些基本的布局Widget就介绍的差不多了，可以多个组合连多试一下。

Flutter学习总结（九、Flutter的基本布局)