
Flutter入门进阶之旅(六)Layout Widget
往期回顾:
前面几期的专栏对大家来说学习起来还算轻松加愉快,我们简单认识了flutter这门新技术,并且尝试着学习了像Text、Image、TextField几个简单的Widget,并且我们用这几个Widget做了一些简单的交互,好像我们并没有注重Widget的显示位置跟排版,我们只是让他显示出来而已,然后要想把这些Widget组合起来放在一个渲染到整个手机屏幕上,我们需要合理的选用一个容器来包裹这些Widget,或者说让这些Widget舒适的排列在一个恰当的容器里,就像我们在做原生android时,如果UI上需要绘制一个水平或者竖直的view排列,我们会选用LinearLayout而不会去选FrameLayout,同理在Flutter上布局的排放我们也要适当的选择正确的容器。
在Flutter中也给我们提供了各种不同应用场景的layout,我们可以根据UI上排版的需要来选用不同的layout去完成我们对UI的绘制,在这些layout中,有些layout的借鉴了前端的盒子布局模型,有些完全跟原生android思想一致,所以对于我们来说学习起来并没有那么抽象,下面我列出几个常用的layout,并且举例跟大家一块看看Flutter到底是怎么完成Widget的布局的。
Flutter中容器:
- Row、Column
- Stack
- Center
- Container
- ListView
- Align
- Padding
- SizedBox
- AspectRadio
- DecoratedBox
- Opactity
下面我列出几种常用的Layout使用场景
1.Row、Column
这两种布局方式几乎一样,所以我把它俩放在一块讲解,先看下源码对二者的描述
从源码注释中我们了解到二者都是一个盛放children widget的array,不同的是一个是在水平方向(horizontal),另一个是竖直方向(vertical)
由于二者类似,我们只拿Row做讲解,来一块分析下Row构造方法,看下提供给我们可定制的属性有哪些
1.1 属性解析
1.1.1 MainAxisAlignment:
主轴方向上的对齐方式,会对child的位置起作用,默认是start。其中MainAxisAlignment枚举值:
- center:将children放置在主轴的中心;
- end:将children放置在主轴的末尾;
- spaceAround:将主轴方向上的空白区域均分,使得children之间的空白区域相等,但是首尾child的空白区域为1/2;
- spaceBetween:将主轴方向上的空白区域均分,使得children之间的空白区域相等,首尾child都靠近首尾,没有间隙;
- spaceEvenly:将主轴方向上的空白区域均分,使得children之间的空白区域相等,包括首尾child;
- start:将children放置在主轴的起点;
其中spaceAround、spaceBetween以及spaceEvenly的区别,就是对待首尾child的方式。其距离首尾的距离分别是空白区域的1/2、0、1。
1.1.2 MainAxisSize:
在主轴方向占有空间的值,默认是max。MainAxisSize的取值有两种:
- max:根据传入的布局约束条件,最大化主轴方向的可用空间;
- min:与max相反,是最小化主轴方向的可用空间;
1.1.3 CrossAxisAlignment:
children在交叉轴方向的对齐方式,与MainAxisAlignment略有不同。CrossAxisAlignment枚举值有如下几种:
- baseline:在交叉轴方向,使得children的baseline对齐;
- center:children在交叉轴上居中展示;
- end:children在交叉轴上末尾展示;
- start:children在交叉轴上起点处展示;
- stretch:让children填满交叉轴方向;
1.1.4TextDirection:
阿拉伯语系的兼容设置,一般无需处理。
1.1.5 VerticalDirection
定义了children摆放顺序,默认是down。VerticalDirection枚举值有两种:
- down:从top到bottom进行布局;
- up:从bottom到top进行布局。
top对应Row以及Column的话,就是左边和顶部,bottom的话,则是右边和底部。
1.1.6 TextBaseline:
使用的TextBaseline的方式,有两种,前面已经介绍过。
干巴巴的说了这么多确实有点枯燥,上个图直观感受一下Row,我在Row里面水平排列了几个RaisedButton
效果图:
样例代码:
cloumn与Row大同小异,读者可自行测试,我就不详细贴代码演示了。下面我们一块来看另外一种layout方式。
2.Stack
Stack即层叠布局,跟原生Android里面的FrameLayout如出一辙,能够将子widget层叠排列。如果不指定显示位置,默认布局在左上角,如果希望子空间显示在具体的位置,我们可以通过Positioned控件包裹子widget,然后根据定位的子控件的top、right、bottom、left属性来将它们放置在Stack的合适位置上。
Stack布局效果图:
上述效果图样例代码:
3.Center
Center布局使用比较简单,场景也比较单一,一般用于协助其他子widget布局,包裹其child widget显示在上层布局的中心位置。上述Stack布局中就利用Center让其显示在屏幕正中心,看下官方对Center的解释:
比较简单直接,我就不贴效果图了,读者可自行利用center包裹子widget做测试,从而直观体验一下center布局。
4.ListView
Listview使用场景跟原生Android一样,都是用于展示长列表数据,也是我们开发中使用的比较多的widget之一,本章节主要分析layout,就不详细展开分析,带大家简单认识下ListView的用法,后续我们专门抽出一个章节讲解ListView,跟listView类似的还有GridView。
ListView效果图:
上述实现样例代码:
5.Align:
Align即对齐控件,能将子控件按照所指定的方式对齐,并根据子控件的大小调整自己的大小。Align对齐子控件的方式有如下几种
来简单使用一下:
代码:
6.SizedBox
SizedBox能够强制控制子控件的宽高显示,比如我指定一个宽高都为200的SiezedBox布局,其里面的child widget的宽高也就被限定死了最大宽高为SizedBox的宽高,即使他有更大的宽高。
利用SizedBox限定Container的宽高为200:
7.Opacity
Opacity控件能调整子控件的不透明度,使子控件部分透明,不透明度的量从0.0到1.1之间,0.0表示完全透明,1.1表示完全不透明。
如图:我在StackLayout中放置两个子widget,其中Text在Stack下方,我把上层Opacity布局的透明度设置为0.5,我们可以隐约看见下层Text显示的内容,读者可自行把透明度更改值测试结果。
本篇内容有点多,旨在带大家一起总结掌握Flutter中常用的几种布局,另外几种布局在现实开发中使用场景比较少,就没有逐一讲解分析, 读者感兴趣的话,可以自行查阅官方文档尝试下具体用法。
授权转载自:谢栋_
