Flutter的基本布局

一起从0开始学习Flutter!

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

可以看到在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的基本布局)