布局类组件-流式布局(Wrap和Flow)

Row和Column,如果子Widget超出屏幕范围,则会报溢出错误,这是因为Row默认只有一行,如果超出屏幕不会折行,我们把超出屏幕显示范围会自动换行得布局称为流失布局.Flutter中通过Wrap和Flow来支持流式布局.

Wrap

Wrap的很多属性在Row(包括Flex和Column)中也有,这些参数意义是相同的,可以认为Wrap和Flex(包括Row和Column)除了超出显示范围后Wrap会换行,其他行为基本相同.

spacing:主轴方向子Widget的间距

runSpacing:纵轴方向的间距

runAlignment:纵轴方向的对齐方式

Flow

我们一般很少会使用Flow,因为其过于复杂,需要自己实现子Widget的位置转换,在很多场景下首先要考虑的是Wrap是否满足需求,Flow主要用于一些自定义布局策略或者性能要求较高的场景,Flow有如下优点:

1 性能好:Flow是一个对子组件尺寸以及位置调整非常高效的控件,Flow用转换矩阵在对子组件进行位置调整的时候进行了优化,在Flow定位过后,如果子组件的尺寸或者位置发生了变化,在FlowDelegate中的paintChildren()方法中调用context.paintChild进行重绘,而context.paintChild在重绘时使用了转换矩阵,并没实际调整组件位置

2 灵活:由于我们需要需要自己实现FlowDelegate的paintChildren()方法,我们需要自己计算每一个组件的位置,因此可以自定义布局策略