根据最近的开发经验,对Flutter的布局有了如下的了解。
在Flutter中,widget由其底层的RenderBox对象渲染。 渲染框由它们的父级给出约束,并且在这些约束下调整自身大小。约束由最小宽度、最大宽度和高度组成; 尺寸由特定的宽度和高度组成。
通常,按照widget如何处理他们的约束来看,有三种类型的盒子:
比较常用的Container默认是尽可能大的占用空间, 但是如果你给它指定一个width,那它就会采用指定的值。
Row和Column 都是Flex弹性盒,根据外部的约束来决定宽度或者高度。
Row和Column都拥有children属性,也就是它们可以拥有多个子组件。
相对来说,Container和Center都只能有一个子组件。
Row是水平方向上的布局,而Column是垂直方向上的。
下面就以Row为例进行说明,
Row的宽度等于所有水平排列子组件的宽度总和,但是如果宽度超出了屏幕宽度,会抛出overflow 屏幕溢出异常,可以使用 Expanded、Wrap 组件自动换行,或使用可滑动组件。Row的高度为最高的那个组件高度。
在垂直方向上,通过crossAxisAlignment来控制布局,有start end center stretch四个选择。
在水平方向上,则是通过mainAxisAlignment,有start end center spaceBetween spaceAround spaceEvenly等选项。
Column的使用相对来说就简单一些。
目前我所用到的布局主要就是这几个。
另外还有流式布局也非常有用,比如Expanded、Wrap, 因为这些布局可以根据屏幕宽度自动换行。
还有一个Stack布局,这个布局实现层叠,同 Positioned 配合使用,可自定义子组件在父布局中的位置。