本篇博客Demo下载点击这里：Flutter布局Demo
1. Flutter布局实战讲解
1.1 布局坐标
首先新建一个Flutter项目 我这里命名为flutter_layoutdemo,
image.png
接下来我们创建一个用来练习布局的layout_demo.dart文件，直接按快捷键“Command + N”
image.png
然后找到main.dart里面的MyApp类，替换掉系统默认的代码，如下图所示：
image.png
替换掉之后，我们直接按快捷键“Control+R” 编译运行到模拟器上面，可以选择安卓或者iOS模拟器，也可以选择运行在真机上面，如下图选择你想运行的模拟器：
image.png
这里我选择的是iphone 11 模拟器，运行结果如下：
image.png
接下来我们在layoutDemo类的
build方法里面加入一些小部件
class LayoutDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
color: Colors.red,
child: Center(
child: Text('kongyulu'),
),
);
}
}
"Control + R " 编译运行
image.png
其实我们还可以通过
alignment 属性是布局居中显示，这个类似于IOS 的UILabel的对齐属性。这样我们可以修改代码如下：
class LayoutDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
color: Colors.red,
alignment: Alignment(0.0, 0.0),
child: Text('kongyulu2')
);
}
我们热更新一下，可以看到效果如下:
image.png
下面我们简单介绍一下aligment属性：
实际上我们上面代码用的相对布局，坐标原点在中心，我们aligment属性 Alignment(x,y)传入x,y的坐标，这里传入（0，0）标识在中心位置，如下图所示：
image.png
如上图所示，Alignment(-1,-1)标识在左上角，Alignment(1,1)在右下角，Alignment(-1,1)在左下角，Alignment(1,-1)在右上角，下面我们可以简单验证一下
如果我们把alignment属性改为Alignment(1,0)，效果如下：
image.png
如果我们把alignment属性改为Alignment(0,1)，效果如下：
image.png
如果我们把alignment属性改为Alignment(-1,-1)，效果如下：
image.png
由此我们可以知道（-1，-1）在左上角， （1，1）在右上角，
1.2 横向布局Row
接下来我们讲解一下横向布局Row,我们修改一下代码，增加一个Row布局，代码如下：
class LayoutDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
color: Colors.red,
alignment: Alignment(0.0, 0.0),
child: Row(
children: <Widget>[
Icon(Icons.add),
Icon(Icons.access_alarm),
Icon(Icons.account_balance_wallet),
],
)
);
}
}
热更新一下，效果如下：
image.png
Row表示横向布局，里面需要传入一个Widget数组，数组里面的Widget小部件都横向排列。我们可以看到小部件默认有点小，我们来修改一下大小将size改为80
class LayoutDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
color: Colors.red,
alignment: Alignment(0.0, 0.0),
child: Row(
children: <Widget>[
Icon(Icons.add,size: 80,),
Icon(Icons.access_alarm,size: 80,),
Icon(Icons.account_balance_wallet,size: 80,),
],
)
);
}
}
重新运行一下效果如下：
image.png
如果我们想跟里面的小部件添加背景颜色，我们只需要将这个小部件放到一个新的Container容器里面包装一下，即可使用Container里面的相关属性，设置颜色等属性。
我们再修改一下代码，给小部件添加背景颜色：
class LayoutDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
color: Colors.red,
alignment: Alignment(0.0, 0.0),
child: Row(
children: <Widget>[
Container(child:Icon(Icons.add,size: 80,) ,color: Colors.blue,)
,
Container(child:Icon(Icons.access_alarm,size: 80,) ,color: Colors.yellow,)
,
Container(child:Icon(Icons.account_balance_wallet,size: 80,) ,color: Colors.green,)
,
],
)
);
}
}
重新运行一下效果如下：
image.png
1.3 纵向布局Column
纵向布局时垂直方向的布局，更横向布局相对应。我们只需要将上面的横向布局代码的Row改为Column，如下：
class LayoutDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
color: Colors.red,
alignment: Alignment(0.0, 0.0),
child: Column(
children: <Widget>[
Container(child:Icon(Icons.add,size: 80,) ,color: Colors.blue,)
,
Container(child:Icon(Icons.access_alarm,size: 80,) ,color: Colors.yellow,)
,
Container(child:Icon(Icons.account_balance_wallet,size: 80,) ,color: Colors.green,)
,
],
)
);
}
}
热更新一下，我们来看一下效果：
image.png
1.4 层级布局Stack
我们再将上面的代码修改为Stack层级布局看看什么效果，修改代码如下：
class LayoutDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
color: Colors.red,
alignment: Alignment(0.0, 0.0),
child: Stack(
children: <Widget>[
Container(child:Icon(Icons.add,size: 80,) ,color: Colors.blue,)
,
Container(child:Icon(Icons.access_alarm,size: 80,) ,color: Colors.yellow,)
,
Container(child:Icon(Icons.account_balance_wallet,size: 80,) ,color: Colors.green,)
,
],
)
);
}
}
我们快捷键“Command+||” 热更新一下，运行效果如下：
image.png
本来是三个，我们只看到了最后一个小部件，说明另外两个被遮挡了，我们来修改一下每个小部件的大小：
image.png
由此我们可以知道 Row横向布局对应x轴，Column纵向布局对应y轴，Stack层次布局对应z轴，我们由x,y,z可以很容易布局想要的效果。
1.5 主轴 mainAxisAlignment
我们的Row,Column都有两个非常重要的属性：主轴mainAxisAlignment 和 交叉轴
其中主轴需要传入一个对象，我们查看源码可以看到：
image.png
主轴属性传入一个
MainAxisAlignment对象，我们可以看到它有下面结构属性：
image.png
-
MainAxisAlignment.center： 表示沿着主轴方向居中显示，如果Row横向布局，则是沿着x轴从左到右横着居中排列显示，如果是Column纵向布局，则是沿着y轴从上往下，纵向居中显示
image.png
image.png -
MainAxisAlignment.end:
如果Row横向布局，则是沿着x轴从左到右横着居中,靠右对齐排列显示
image.png
如果是Column纵向布局，则是沿着y轴从上往下，纵向居中, 并且靠底部对齐显示
image.png -
MainAxisAlignment.spaceAround: 就是将主轴方向剩下的空间平均分配给每个子控件。
如果Row横向布局，则水平方向剩下的空间平均分配在每个空间的周围
image.png
如果是Column纵向布局，则垂直方向剩下的空间平均分配在每个空间的周围
image.png
image.png -
MainAxisAlignment.spaceBetween: 剩下的空间平均分配到每个小部件之间的间隔。
image.png
image.png -
MainAxisAlignment.spaceEvently: 剩下空间和小部件一起平均分配，是等间距的分配。
image.png
image.png -
MainAxisAlignment.start : 表示主轴开始的方向， 也是默认值
如果是Row布局，MainAxisAlignment.start主轴效果如下：
image.png
如果是Column布局，MainAxisAlignment.start主轴效果如下：
image.png
1.6 交叉轴 CrossAxisAlignment
CrossAxisAlignment交叉轴拥有的属性如下：
image.png
交叉轴默认的属性是
center 居中显示
-
CrossAxisAlignment.baseline :
这个baseline属性不能单独使用，需要结合其他属性配合使用，否则会报错：
image.png
我们修改一下代码，增加textBaseline: TextBaseline.alphabetic属性，配合使用，因为baseline属性需要针对文本才能体现效果，所以我们还需要在每个小部件里面增加一个文本标签
主轴为x轴，沿交叉轴y轴方向底部对齐
image.png
我们将标签的背景大小设置一致更好对比：
image.png
纵向布局时，
baseline属性使字体沿交叉轴左对齐
image.png
我们再来看一下去掉baseline属性的效果：
image.png
-
CrossAxisAlignment.center :
image.png
image.png -
CrossAxisAlignment.end :
image.png
image.png -
CrossAxisAlignment.start :
image.png
image.png -
CrossAxisAlignment.stretch :
image.png
image.png
1.7 Expanded自动填充
Expanded 是一种比较灵活的布局方案，它使得子部件随之父控件的大小自动填充
我们接下来将上面的代码修改一下，将每个小部件放入Expanded布局中，修改后代码如下:
class LayoutDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
color: Colors.white,
alignment: Alignment(0.0, 0.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.baseline,
textBaseline: TextBaseline.alphabetic,
children: <Widget>[
Expanded(child: Container(child:Text('孔雨露',style: TextStyle(fontSize: 15),) ,color: Colors.blue,height: 80,),)
,
Expanded(child:Container(child:Text('努力',style: TextStyle(fontSize: 30),) ,color: Colors.yellow,height: 80,),)
,
Expanded(child: Container(child:Text('坚持',style: TextStyle(fontSize: 60),) ,color: Colors.green,height: 80,),)
,
],
)
);
}
}
运行效果如下：
image.png
我们将上面的代码的布局Column改为Row横向布局，效果如下:
image.png
由此我们知道，如果我们设置了
Expanded自动填充，假设我们使用Row横向布局我们不需要设置宽度（就算设置了宽度也不会生效，没有意义），沿主轴x轴每个子部件自动填充拉伸满，不会在主轴方向留下空隙，同理，如果是纵向布局，则设置Expanded自动填充后，不需要设置高度（就算设置了高度也不会生效，没有意义），沿主轴y会自动填充拉伸。
这个属性对应我们文字很长时，会根据宽度自动换行，如下图：
image.png
接下来，如果我们看一下如果上面的三个小部件，不是每个都使用expanded布局呢，现在我们改一下代码，把中间的那个小部件改为不是expanded布局。
image.png
1.8 Alignment属性
我们将上面的代码简化一下，改为如下：
Widget build(BuildContext context) {
return Container(
color: Colors.white,
alignment: Alignment(0.0, 0.0),
child: Container(child:
Icon(Icons.add,size: 30,),height: 40,
color:Colors.blue,)
);
}
运行效果如下：
image.png
我们一般用alignment根据比例来显示位置，
收录自|原文地址
