本篇博客Demo下载点击这里:Flutter布局Demo
1. Flutter布局实战讲解
1.1 布局坐标
首先新建一个Flutter项目 我这里命名为flutter_layoutdemo,

接下来我们创建一个用来练习布局的layout_demo.dart文件,直接按快捷键“Command + N”

然后找到main.dart里面的MyApp类,替换掉系统默认的代码,如下图所示:

替换掉之后,我们直接按快捷键“Control+R” 编译运行到模拟器上面,可以选择安卓或者iOS模拟器,也可以选择运行在真机上面,如下图选择你想运行的模拟器:

这里我选择的是iphone 11 模拟器,运行结果如下:

接下来我们在layoutDemo类的
build
方法里面加入一些小部件
class LayoutDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
color: Colors.red,
child: Center(
child: Text('kongyulu'),
),
);
}
}
"Control + R " 编译运行

其实我们还可以通过
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')
);
}
我们热更新一下,可以看到效果如下:

下面我们简单介绍一下aligment属性:
实际上我们上面代码用的相对布局,坐标原点在中心,我们aligment属性 Alignment(x,y)传入x,y的坐标,这里传入(0,0)标识在中心位置,如下图所示:

如上图所示,Alignment(-1,-1)标识在左上角,Alignment(1,1)在右下角,Alignment(-1,1)在左下角,Alignment(1,-1)在右上角,下面我们可以简单验证一下
如果我们把alignment属性改为Alignment(1,0),效果如下:

如果我们把alignment属性改为Alignment(0,1),效果如下:

如果我们把alignment属性改为Alignment(-1,-1),效果如下:

由此我们可以知道(-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),
],
)
);
}
}
热更新一下,效果如下:

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,),
],
)
);
}
}
重新运行一下效果如下:

如果我们想跟里面的小部件添加背景颜色,我们只需要将这个小部件放到一个新的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,)
,
],
)
);
}
}
重新运行一下效果如下:

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,)
,
],
)
);
}
}
热更新一下,我们来看一下效果:

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+||” 热更新一下,运行效果如下:

本来是三个,我们只看到了最后一个小部件,说明另外两个被遮挡了,我们来修改一下每个小部件的大小:

由此我们可以知道 Row横向布局对应x轴,Column纵向布局对应y轴,Stack层次布局对应z轴,我们由x,y,z可以很容易布局想要的效果。
1.5 主轴 mainAxisAlignment
我们的Row,Column都有两个非常重要的属性:主轴mainAxisAlignment
和 交叉轴
其中主轴需要传入一个对象,我们查看源码可以看到:

主轴属性传入一个
MainAxisAlignment
对象,我们可以看到它有下面结构属性:
-
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交叉轴拥有的属性如下:

交叉轴默认的属性是
center
居中显示
-
CrossAxisAlignment.baseline :
这个baseline属性不能单独使用,需要结合其他属性配合使用,否则会报错:
image.png
我们修改一下代码,增加textBaseline: TextBaseline.alphabetic
属性,配合使用,因为baseline属性需要针对文本才能体现效果,所以我们还需要在每个小部件里面增加一个文本标签
主轴为x轴,沿交叉轴y轴方向底部对齐

我们将标签的背景大小设置一致更好对比:

纵向布局时,
baseline
属性使字体沿交叉轴左对齐
我们再来看一下去掉baseline属性的效果:

-
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,),)
,
],
)
);
}
}
运行效果如下:

我们将上面的代码的布局Column改为Row横向布局,效果如下:

由此我们知道,如果我们设置了
Expanded
自动填充,假设我们使用Row横向布局我们不需要设置宽度(就算设置了宽度也不会生效,没有意义),沿主轴x轴每个子部件自动填充拉伸满,不会在主轴方向留下空隙,同理,如果是纵向布局,则设置Expanded
自动填充后,不需要设置高度(就算设置了高度也不会生效,没有意义),沿主轴y会自动填充拉伸。
这个属性对应我们文字很长时,会根据宽度自动换行,如下图:

接下来,如果我们看一下如果上面的三个小部件,不是每个都使用expanded布局呢,现在我们改一下代码,把中间的那个小部件改为不是expanded布局。

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,)
);
}
运行效果如下:

我们一般用alignment根据比例来显示位置,
收录自|原文地址
网友评论