Flutter学习之布局

最近在学习Flutter，在这里把学的的一些记录记下来，当做是自己的笔记吧；

Flutter 是谷歌的移动UI框架，可以快速的再iOS和Android上构建高质量的原生用户界面。Flutter可以与现有的代码一起工作；而且随着Flutter的成熟被越来越多的开发者和公司所接受，而且Flutter是完全免费、开源的；

Flutter的布局

Flutter引用了大量的Web开发知识，比如FlexBox布局方式，盒模型等，这些引用了CSS的一些思想。所以从UI界面的实现角度来说，只要对Web的布局有些了解，加上对Dart语言熟悉就能轻松的上手Flutter的布局代码编写；

下表示布局时所用到的组件以及装饰组件的说明

组件名称	中文名称	简单说明
Align	对齐布局	指定child的对齐方式
AspectRatio	调整宽高比	根据设定的宽高比调整child
Baseline	基准线布局	所有child所在的同意条水平线
Center	居中布局	child处于水平和垂直方向的中间位置
Column	垂直布局	对child在垂直方向进行排列
ConstrainedBox	限定宽高	限定child的最大值
Container	容器布局	容器布局是一个组合的widget，包含定位和尺寸
FittedBox	缩放布局	缩放以及位置调整
FractionllySizedBox	百分比布局	根据现有的空间按照百分比调整child的尺寸
GridView	网络布局	对多行多列同时进行布局
IndexedStack	栈索引布局	IndexedStack继承自Stack，显示第index个child，其他child都是不可见的
LimitedBox	限定宽高布局	对最大宽高进行限制
ListView	列表布局	用列表方式进行布局，比如多项数据的场景
Offstage	开关布局	控制是否显示组件
OverflowBox	溢出父容器显示	允许child超出父容器的范围显示
Padding	填充布局	处理容器与child之间的间距
Row	水平布局	对child在水平方向进行排列
SizedBox	设置具体尺寸	用一个特定大小的盒子来限定child的宽度和高度
Stack/Alignment	Alignment栈布局	根据Alignment组件的属性将child定位在Stack组件上
Stack/Positioned	Positioned栈布局	根据Positioned组件的属性将child定位在Stack组件上
Table	表格布局	使用表格的行和列进行布局
Transform	矩阵转换	做矩阵变换，对child做评议、旋转、缩放等操作
Wrap	按宽高自动换行	按宽度或者高度，让child自动换行布局

下面我就记录一下几种比较常用的布局方式：Row、Column、Stack；

Row --- 水平布局

水平布局是一种常用的布局方式，主要Row组件来实现子组件在水平方向的排列，其中常见的属性如下：

• mainAxisAlignment： 其类型是MainAxisAlignment，是主轴的排列方式；
• crossAxisAlignment： 其类型是CrossAxisAlignment, 次轴的排列方式；
• mainAxisSize： 其类型是MainAxisSize，主轴应该占据多少空间。取值max为最大，min为最小；
• children： 其类型是元素为widget的List类型，组件子元素，她的本质是一个List列表；

对于Row来说，水平方向是主轴，垂直方向是次轴，如图

Row

Column --- 垂直布局

垂直布局也是一种常用的布局方式，与Row组件的区别在于Column组件主要是用来实现子组件在垂直方向的排列，垂直方向为主轴，水平方向为次轴，其常见属性与Row一样，示例图为：

Colunm

Stack --- 层级布局

Stack组件的每一个组件要么定位要么不定位，定位的子组件是用Positioned组件包裹的。Stack组件本身包含所有不定位的子组件，子组件根据alignment属性定位（默认为左上角）。然后根据定位的子组件的top、right、bottom和left属性将它们放置在Stack组件上，Stack的主要属性如下：

• alignment : 类型（AlignmentGeometry），默认值是Alignment.topLeft,其定位位置有一下几种：
  • bootomCenter:底部中间位置。
  • bootomLeft：底部左侧位置。
  • bootomRight:底部右侧位置。
  • center:正中间位置。
  • centerLeft:中间居左位置。
  • centerRight:中间居右位置。
  • topCenter:上部居中位置。
  • topLeft:上部居左位置。
  • topRight:上部居右位置。

个人博客