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


  • 初级根底系列

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,

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

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

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

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

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

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

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

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

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

接下来咱们在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 ” 编译运转

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

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')
);
}

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

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

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

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

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

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

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

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

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

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

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

由此咱们能@ 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: <Widget>[
Icon(Icons.add),
Icon(Icons.accl m V ! Iess_alw ) f f Q $ + |arm),
Icon(Icons.account_balance_wallet),
],
)
);
}
}

热更新一下,作用如下:

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

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(I4 V B 4cons.access_alarm,size: 80,),
Icon(Icons.account_balance_wallet,size: 80,),
],
)
);
}
}

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

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

假如咱们想跟里边的小部件添加布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: <Widget>[
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 @
}

从头运转一下作用如下:

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

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: <Widget>[
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,)
,
],
)
);
}
}

热更新一下,咱们来看一下作用:

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

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: <Widget>[
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+||” 热更新一下,运转作用如下:

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

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

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

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

1.5 主轴 mainAxisAlignment

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

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

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

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

Flutter开发实战初级(2)页面布局详解
  • MainAxisAlignment.center: 表明沿着主轴方向居中显现,假如RowL R D D c 9横向布@ 5 G ]局,则是沿着x轴从左到右横着居中摆放显现,假如是Column纵向布局,则是沿着y轴从上往下,纵向居中显现
Flutter开发实战初级(2)页面布局详解
Flutter开发实战初级(2)页面布局详解
  • MainAxisAlignment.end :

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

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

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

Flutter开发实战初级(2)页面布局详解
  • MainAxisAlignment.spaceAround: 就是将主轴方向剩余的空间平均分配给每个子控件。

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

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

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

Flutter开发实战初级(2)页面布局详解
Flutter开发实战初级(2)页面布局详解
  • MaiO & C % ;nAxisAlignme6 n qnt.spaceBetween: 剩余的空间平均分配到每个小部件之间的距离。

    Flutter开发实战初级(2)页面布局详解
Flutter开发实战初级(2)页面布局详解
  • MainAxisAlignment.spaceEvently: 剩余空间和小部] c O * 7件一同平均分O ; h k `配,是等距离的分配。
Flutter开发实战初级(2)页面布局详解
Flutter开发实战初级(2)页面布局详解
  • MainAxisAlignment, 2 A.start : 表明主轴开始的方向, 也是默许值

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

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

假如是Column布局,MainAxisAlignment.start 主轴作用如下:

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

1.6 穿插轴 CrossAxisAlignment

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

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

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

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

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

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

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

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

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

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

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

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

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

Flutter开发实战初级(2)页面布局详解
  • Cross0 & * * $AxisAlignment.centeR / 4r :

    Flutter开发实战初级(2)页面布局详解
Flutter开发实战初级(2)页面布局详解
  • CrossAxis6 S k p I $ 4Alignment.end :

    Flutter开发实战初级(2)页面布局详解
Flutter开发实战初级(2)页面布局详解
  • CrossAxisAlignment.start :

    Flutter开发实战初级(2)页面布局详解
Flutter开发实战初级(2)页面布局详解
  • CrossAxisAlignment.stretch :

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

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作用如下:

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

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

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

由此咱们[ 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很长时,会依据宽度主动换行,如下图:

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

接下来,假如咱们看一下6 g [ &假如上面的三个小部件,不是每个都运用expanded布局呢,现在咱们改一下代码,把中心的那个小部件改为不是expanded布局。

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

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,)
);
}

运转作用如下:

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

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

发表评论

提供最优质的资源集合

立即查看 了解详情