Flutter 展示 iOS 页面 flutter界面布局

初级根底系列

Flutter开发实战初级(1)ListView详解

Flutter开发实战初级(2)布局详解

项目实战系列

Flutter开发实战 高仿微信(1)主页

Flutter开发实战 高仿微信(2)发现页

Flutter开发实战初级(2)页面布局详解q ) z 8 C

本篇博& Q G L ` w | m客Demo下载点击这儿：Flutter布局Demo

1. Flutter布局实战解说

1.1 布局坐标

首先新建一e b ^ E D D个Flutter项目 我这儿命名为flutter_layov h K S , = & 0utdema v f L s K y w 7o,

接下来咱们创建一个用来操练布局的layout_demo.dart文件，直接按快捷键“CommanF p 4 X ;d + N”

然后找到main.dart里边的$ p w nMyAp@ w a yp类，替换掉体系默a 8 i Y S Q C –许d W 3 O o @ d + @的代码，如下图所示：

替换掉之后，咱们直接按快捷键“Control+R” 编译} , V & j Y #运转到模拟器上面，能够挑选安卓或者iOS模拟器，也能够挑选运转在真机上面，如下图挑选你想运转的模拟器：

这儿我挑选的是iphone 11 模拟器，运转成果如下：

接下来咱们在layout, q T 9Demo类的build办法里边加入一些小部件

class LayoutDemo extends StatelessWidget{
@override
Widget build(B~ e ` f L } guildContext context) {
return Container(
color: Colors.red,
child: CenI e 0 C ] c 6ter(
child: Text('kongyulu'),
),
);
}
}

“Control + R ” 编译运转

其g – O实咱们还能够经过; i J Z & *alignment 特点是布局居中显现，这个类似于IOS 的UILabel的对齐特点。这样咱们能够修正代码如下：

class LayoutDemo extends StatelessWidget{
@o[ 3 } & kverride
Widget build(BuildContext context) {
return Container(
color: Colors.red,
alignment: Alignment(0.0, 0.0),
child: Text: i U a U x ! 7('kongyulu2')
);
}

咱们热更新一下，能够看到作用如下:

下面* / $ (咱们简略介绍一下aligment特点：

实际上咱们上面代码用的相对布局. t b s k %，坐标原点在中心，咱们aligment特点 Alignment(x,y)传入x,y的坐标，这儿传入(J c _ t X ~ ` {0，0)标识在中心方位，如下图所示：

如上图所示，Alignment(-1,-1)标识在左上角，Alignment(1,1)在右下角，Alignment(-1,1)在左下角，Alignment(1,-1)在右上角，下面咱们能够简略验证一下

假如咱们把alignment特点改为Alignment(1,0)，作用如下：

假如咱们把alignment特点改为Alignm? G ? ^ent(0,^ ; w C1)，作( { v & , & S G用如下：

假如咱们把alignment特点改为Alignment(-1,-1)，作用如下：

由此咱们能@ p P I _ 8 a够知道(-1，-1)在左上角， (1，1)在右上角，

1.2 横向布局Row

接下来咱们解说一下横向布局Row,咱们修正一下代码，添加一个Row布局，代码如下~ 3 d u ?：

class LayoutDemo extends StatelessWidget: ] W c ` B x{f b E / O
@override
Widget buiK 1 6 C e 5 Lld(w r ] S oBuildContext context) {
return Container2 v { ? y 9 l z r(
colorr g | T ) 8: Colors.red,
alignment: Alignment(0.0, 0.0),
child: Row(
children: [
Icon(Icons.add),
Icon(Icons.accl m V ! Iess_alw ) f f Q $ + |arm),
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: [
Icon(Icons.add,size: 80,),
Icon(I4 V B 4cons.access_alarm,size: 80,),
Icon(Icons.account_balance_wallet,size: 80,),
],
)
);
}
}

从头运转一下作用M j l $ l如下：

假如咱们想跟里边的小部件添加布6 ( |景色彩，咱们只需求将这个小部件放到一个新的ContaineF 3 1 v 4 J y )r容器里边包_ : c装一下，即可运用CZ N `ontainer里边的相关特点，设置t _ g W Z B色彩等特点。

咱们再修正一下代, _ ~ ? ,码，给小部件添加布景色彩：

class LayoutDemo extends StatelessWidget{
@overV , B k N h C ~ aride
Widget build(BuildContext context) {
return Container(
color: Colors.red,
alignment: Alignment(0.0, 0.0),
child: Row(
childrb ~ ( B $ % %en: [
Container(child:Icon(Icons.add,size: 8~ C K0,) ,color: Colors.blue,)
,
Container(child:Icon(Icons.access_alaa K ) ( t 3rm,size: 80,) ,color: CZ v A G U H `olors.yellow,)
,7 % B K & l r
ConK ! ^ ; } atainer(child:Icon(Icons.account_balanc: +e_wallet,size: 80,) ,colo+ } Y 7r: Colors.green,)
,
],
)
);
}x d ; c @
}

从头运转一下作用如下：

1.3 纵向布局Column

纵向布局时笔直方向的布局，更横向布局相对应。咱们只需求将上面的横向布局代码m l ? 6 y的R, E – b Q low改为Column，如下：% { $

class LayoutDemo extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Container(
color: Colors.red,
alignment: Alignment(0.0, 0.0),
cht L % U 6 7 wild: Col{ $ U 3 1 e s = mumn(
childreu z i S ! nn: [
Container(child:Icon(Icons.add,size: 8g Q p t 6 ! h O 10,) ,color: Colors.blue,)
,
Container(chilj U ]d:Icon(Icons.access_alarm,size: 80,) ,color: Colors.yellow,)
,
Container(child:Icon(Icons.^ w A z , 9 gaccount_balance_wallet,size: 80,) ,color: Colors.green,)
,
],
)
);
}
}

热更新一下，咱们来看一下作用：

1.4 层级布局Stacx h Z B ~ = r Ik

咱们再将上面的代码修正为Stack层级布局看看什么作用，修正代码如下：

class LayoutDemo extends StatelessWidget{
@oE | Q $verride
Widget build(BuildContext context) {
return Container(
color: Colors.red,
alignment: Alignment(0.0, 0.0),
child: Stack(
children: [
Container(child:Icon(Icons.add,siz8 / u E { } . o |e: 80,) ,color: Colors.blue,)
,
Container(child:Icon(Icons.access_alarm,siz5 / & s ^ a Ce: 80,) ,color: Colors.yellow,)
,
Container(child:I/ P s 2con(Icons.account_baE - s H F U Llance_wallet,size: 80,) ,color: Colors.green,)
,
],
)
);
}
}

咱们快捷键“Command+||” 热更新一下，运转作用如下：

本来是三个，咱们只看到了最终一个小部件，说明另外两_ ; { S 4 ! g q F个被遮挡了，咱们来修正一下每个小部件的巨细：

由此咱们能够知道 Row横向布局对应x轴，Column纵向布局对应y轴，Stack层次布局对应z轴，咱们由x,y,z能够很容易布局想要的作用。

1.5 主轴 mainAxisAlignment

咱们的Row,Column都有两} F . , + { G个非常重要的特点：主轴mainAxisAz ! * = o 3 5lignment 和 穿插轴

其中主轴需求传入一个目标，2 J 3 * o咱们查看源码能够看到：

主i Z ) c p ! ~ q轴特U t i c = %点传入一个MainAxisAlignment目~ } O | n j标，咱们能够看到它有下面结构特点：

MainAxisAlignment.center： 表明沿着主轴方向居中显现，假如RowL R D D c 9横向布@ 5 G ]局，则是沿着x轴从左到右横着居中摆放显现，假如是Column纵向布局，则是沿着y轴从上往下，纵向居中显现

MainAxisAlignment.end :

假如RowM n , j横向布局，则是沿着x轴从左到右横着居中,靠右对齐C B L )摆放显现

假如是Column纵向布局，则是沿着y轴从上往下，纵向居中, 而且靠底部对1 6 1 r /齐显现

MainAxisAlignment.spaceAround: 就是将主轴方向剩余的空间平均分配给每个子控件。

假如Row横向布局@ N t J，则水平方向剩余的空间平均分配在每个空间的周围

假如是ColuS M Dmn纵向布局，则笔直方向剩余的空间平均分配在每个空间的周围

MaiO & C % ;nAxisAlignme6 n qnt.spaceBetween: 剩余的空间平均分配到每个小部件之间的距离。

MainAxisAlignment.spaceEvently: 剩余空间和小部] c O * 7件一同平均分O ; h k `配，是等距离的分配。

MainAxisAlignment, 2 A.start : 表明主轴开始的方向， 也是默许值

假如是Row布局，MainAxisAlignmentV S ) d.start 主轴作用如下：

假如是Column布局，MainAxisAlignment.start 主轴作用如下：

1.6 穿插轴 CrossAxisAlignment

CrossAxisAlignment穿插轴拥有j X L 1的特点如下：

穿插轴默许的特点是center 居中显现

CrossAxisAlignment.baseline :

这个baseline特点不能独自运用，需k 6 w . S | W n求结合其他特点配合运用，不然会报错：

咱们修正一下代码，添加textBaseline: TextBaseline.alphabetic特点，配合运用，由于baseline特点需求针对文本才干体现作用，所以U m * b 1咱们还需求在每个小部件里边添加一个文本标签

主轴为x轴，沿穿插轴y轴方向底部对齐

咱们将标签的布景巨细设置共同更好比照：

纵向布局时，baseline特点使字体沿穿插轴左对齐

咱们再来看一下去掉baseline特点的作用：

Cross0 & * * $AxisAlignment.centeR / 4r :

CrossAxis6 S k p I $ 4Alignment.end :

CrossAxisAlignment.start :

CrossAxisAlignment.stretch :

1.7 Expanded主动填充

Expanded 是一种比较灵敏的布局方案，它使得子部件随之父控件的巨细主动填充

咱们接下来将上面的代码修正一下，将每个小部件放入Expanded布局中，修正后代码如下:

class LL ! L |ayoutDemo extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Container(
color: Colors.white,
alignment: Alignment(0.0, 0.0),
child: Column(
mainAxisAlignment: MainAxisAlig: v {nment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.bC d ) 5 ; P Q !aseline,
textBaseline: TextBaseline.j b N 7 / Ealphabetic,
childreI _ A ; - T k Sn: &li o u Ot;Wi5 C 3dget>[
Expanded(child: Container(child:Text('孔雨露',style: TextStyle(fontSize: 15),) ,color: Colors.blT 0 rue,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),) ,c% G &olor: Colors.green,height: 80,),)
,
],
)
);
}
}

运转j . W K % b作用如下：

咱们将上面的代码的布局Column改为Row横向布局，作用如下:

由此咱们[ L m 9 L /知道，假如咱们设置了Expanded主动填充，假设咱们运用Row横向布局咱们不需求设置宽度(就算设置了宽度也不会生效，没有意义)，( G C ? ]沿主轴x轴每个子部% d J } * $件主动填充拉伸满，不会在主轴方向留下空地，X , d f _ 1同理，假如是纵向布局，则设置Expanded主动填充后，不需求设置高度(就算设置了高度也不会生效Z a d i L T y，没有意义g 0 5 Y –)，沿主轴y会主动填充拉伸。

这个特点对应咱们文字8 I r C l J 1 p很长时，会依据宽度主动换行，如下图：

接下来，假如咱们看一下6 g [ &假如上面的三个小部件，不是每个都运用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:ColL Q lors.blue,)
);
}

运转作用如下：

咱们一般用al 9 g o Alignment依据比例来显现方位，