Flutter的布局

Posted 2022-07-27 WebCodingTech

根据最近的开发经验，对Flutter的布局有了如下的了解。

在Flutter中，widget由其底层的RenderBox对象渲染。 渲染框由它们的父级给出约束，并且在这些约束下调整自身大小。约束由最小宽度、最大宽度和高度组成; 尺寸由特定的宽度和高度组成。

通常，按照widget如何处理他们的约束来看，有三种类型的盒子：

• 尽可能大。 例如 Center 和 ListView 的渲染盒
• 跟随子widget大小。 例如, Transform 和 Opacity 的渲染盒。
• 指定尺寸。 例如, Image 和 Text的渲染盒

比较常用的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 配合使用，可自定义子组件在父布局中的位置。