Flutter 入门指北之常用布局

码个蛋(codeegg)第 588 次推文

上节填完了 Scaffold 留下的坑，这节继续填坑，之前留下关于 Layout 的坑，又是一堆部件袭来

Container

为了让我们的界面更容易被扩展，通常会在最外层包裹一层 Container，其构造函数也不是很难理解

Container({ Key key, this.alignment, // child 的对齐方式，包括左对齐，居中，右对齐，左上对齐..等等 this.padding, // child 和 Container 的边距 Color color, // Container 的背景色 Decoration decoration, // 样式，可以设置背景图，圆角等属性 this.foregroundDecoration, // child 的样式 double width, // 宽度 double height, // 高度 BoxConstraints constraints, // 默认使用 BoxConstraints.tightFor，可以手动传入 this.margin, // Container 同上层容器的边距 this.transform, // 是个 Matrix4 矩阵，(嗯..这个参数基本很少用，没怎么了解 /捂脸) this.child, // 需要展示的内容 })
// ...const BoxConstraints.tightFor({ double width, double height }): minWidth = width != null ? width : 0.0, maxWidth = width != null ? width : double.infinity, minHeight = height != null ? height : 0.0, maxHeight = height != null ? height : double.infinity;

让我们写个圆角矩形的外层，内层值显示白色文字

class HomePage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( body: SafeArea( child: Container( alignment: Alignment.center, // 宽，高度同上层容器相同 width: MediaQuery.of(context).size.width, height: MediaQuery.of(context).size.height, margin: const EdgeInsets.all(8.0), padding: const EdgeInsets.all(20.0), // Container 的样式 decoration: BoxDecoration( borderRadius: BorderRadius.circular(20.0), color: Colors.red,// shape: BoxShape.circle, // 该属性不可同 borderRadius 一起使用 backgroundBlendMode: BlendMode.colorDodge, // 背景图片和颜色混合模式 image: DecorationImage(image: AssetImage('images/ali.jpg'), fit: BoxFit.cover)), child: Text('Container Text', style: TextStyle(color: Colors.white, fontSize: 30.0)),// color: Theme.of(context).primaryColor, // 该属性不可和 decoration 一起使用 )), ); }}

效果图如下：

该部分代码查看 column_main.dart 文件

看到这，应该很多小伙伴注意到 margin 和 padding 属性用来和别的部件保持间距，那...那我就是不用 Container 呢(专门来挑事的...)，当然没问题，有个专门用来设置间距的部件 Padding，看名字就可以看出来作用了，修改下 child 部分代码，这边先提前用下接下来会讲的部件

child: Column( children: <Widget>[ Text('Container Text', style: TextStyle(color: Colors.white, fontSize: 30.0)), Padding( // 需要传入一个间隔值，`Flutter` 提供了很多 EdgeInsets 来设置间隔， // 参数也很明确，可以一一尝试 padding: const EdgeInsets.symmetric(vertical: 12.0), // 传入需要间隔的部件 child: Text('Container Text', style: TextStyle(color: Colors.white, fontSize: 30.0))) ], ),

效果就不展示了，接下来就要开始我的填坑之旅了....

Flex，Row，Column

写 Android 的小伙伴应该比较常用 LinearLayout，在 Flutter 中用两个部件，Row Column来代替 Android 中的 LinearLayout，其中 Row 是横向布局，Column 是垂直布局，因为 Row 和 Column 都是继承于 Flex 部件，Flex 比他们多了 direction 属性用来指定方向，所以主要拿 Column 来讲解，Flex 、Row 用法相同

Column({ Key key, // 对齐方式，对于 `Column` start 为顶部，对于 `Row` 需要分语言，和语言同向 // 3 种比较特殊的对齐方式，前端的小伙伴会了解， // spaceAround 两个部件之间的间隔是部件和上层容器间隔的两倍 // spaceBetween 两侧部件同上层容器间隔为 0，部件之间的间隔相等 // spaceEvenly 部件之间的间隔同两侧部件与上层容器间隔 MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start, MainAxisSize mainAxisSize = MainAxisSize.max, // 主轴的大小 CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center, // 副轴对齐方式 TextDirection textDirection, // 文字方向，决定 start VerticalDirection verticalDirection = VerticalDirection.down, // 垂直方向 TextBaseline textBaseline, List<Widget> children = const <Widget>[], // 内部子部件 })

Row 和 Column 都有主轴和副轴，如何区分呢，布局平行方向为主轴，垂直方向为副轴，我们把 Container 的 child 修改成 Column，然后把 Text 放到 Column 中，多放几个，然后自己设置 mainAxisAlignment 属性，查看布局的变化

// ... 省略相同代码child: Column( mainAxisAlignment: MainAxisAlignment.spaceAround, children: <Widget>[ Text('Container Text 1', style: TextStyle(color: Colors.white, fontSize: 30.0)), Text('Container Text 2', style: TextStyle(color: Colors.white, fontSize: 30.0)), Text('Container Text 3', style: TextStyle(color: Colors.white, fontSize: 30.0)), Text('Container Text 4', style: TextStyle(color: Colors.white, fontSize: 30.0)), Text('Container Text 5', style: TextStyle(color: Colors.white, fontSize: 30.0)), ], )

最后的效果图如下：

这边 Column 内部的子部件因为高度相同，如果不同还需要等分空间的话，就不可以通过设置 mainAxisAlignment 属性来实现了，这里介绍一个等分的部件 Expanded

const Expanded({ Key key, int flex = 1, // 所占比例 @required Widget child, // 子部件 })

直接给 Text 外层加一个 Expanded 即可实现效果，当然可以按照需求来设置 flex 来修改比例值。

当然，在使用过程中也会遇到那么些坑，我们修改下代码，把 child 的代码修改成如下

child: Row( children: <Widget>[ Text('ABC' * 5, style: TextStyle(color: Colors.white, fontSize: 16.0)), Text('ABC' * 5, style: TextStyle(color: Colors.white, fontSize: 16.0)), Text('ABC' * 5, style: TextStyle(color: Colors.white, fontSize: 16.0)), Text('ABC' * 5, style: TextStyle(color: Colors.white, fontSize: 16.0)), Text('ABC' * 5, style: TextStyle(color: Colors.white, fontSize: 16.0)) ], )

然后运行下，你的屏幕就提示你 RIGHT OVERFLOWED BY XXX PIXELS 「**,  *****」我猜你内心肯定这样的，冷静冷静

既然遇到问题，当然要解决，不然和产品去撕逼吗..？这边，我们把 Row 换成另一个布局 Wrap 然后再运行，Prefect，Wrap 和 Row 的参数基本类似

Wrap

Wrap({ Key key, this.direction = Axis.horizontal, this.alignment = WrapAlignment.start, this.spacing = 0.0, // 两个子部件之间的间隔，默认 0.0，如果值过大，可能导致原来同行的两个部件分行 this.runAlignment = WrapAlignment.start, this.runSpacing = 0.0, // 排布方向上 两个子部件的间隔 this.crossAxisAlignment = WrapCrossAlignment.start, this.textDirection, this.verticalDirection = VerticalDirection.down, List<Widget> children = const <Widget>[], })

当然，很多时候只有以上的布局是不行的，比如我们需要实现一个圆形头像，然后一段文字在其上面 ，例如下面的效果

接下来介绍一个堆叠的部件 Stack，源码比较简单，就不贴了，直接上效果代码

class HomePage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( body: Center( child: Stack( // 内部子部件的对齐方式 alignment: Alignment.center, children: <Widget>[ // 圆形头像，指定半径，指定背景图为头像即可 CircleAvatar(backgroundImage: AssetImage('images/ali.jpg'), radius: 100.0), Text( 'Kuky', style: TextStyle(color: Colors.white, fontSize: 34.0)), ], )), ); }}

如果我们需要第三个部件，底部距离圆形头像10px，那么只靠 alignment 是不可能实现了

所以，另外一个灰常流弊的部件就出来了 Positioned，其源码也比较简单，我还是不贴了吧~，还是直接上代码，直接修改

class HomePage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( body: Center( child: Stack( alignment: Alignment.center, children: <Widget>[ CircleAvatar(backgroundImage: AssetImage('images/ali.jpg'), radius: 100.0), Text( 'Kuky', style: TextStyle(color: Colors.white, fontSize: 34.0), ), Positioned(child: Text('另外一段文字', style: TextStyle(color: Colors.white, fontSize: 20.0)), bottom: 10.0), // left, right, top, bottom 分别表示和 stack 的间距 ], )), ); }}

最后的效果图如下：

很好，今天填了布局的这个大坑，而且讲的部件貌似还挺多的，虽然还是比较简单，剩下的就给小伙伴们慢慢消化今天的内容。

下节，除了有常用的部件外，我会尽量加上实战内容

代码地址:

https://github.com/kukyxs/flutter_arts_demos_app