流式布局
流式布局在移動(dòng)端是非常常見(jiàn)的盒件，比如商品列表蹬碧，瀑布流、標(biāo)簽頁(yè)等等
Flutter 中提供了兩種流式布局Wrap和Flow
Wrap
Wrap可以進(jìn)行水平方向或者垂直方向上的布局,在一行或者一列現(xiàn)實(shí)不完所有的widgets的時(shí)候炒刁，能夠根據(jù)當(dāng)前寬度或者高度自動(dòng)換行恩沽。
Wrap({
Key key,
this.direction = Axis.horizontal, //排列方向，默認(rèn)水平方向排列
this.alignment = WrapAlignment.start, //子控件在主軸上的對(duì)齊方式
this.spacing = 0.0, //主軸上子控件中間的間距
this.runAlignment = WrapAlignment.start, //子控件在交叉軸上的對(duì)齊方式
this.runSpacing = 0.0, //交叉軸上子控件之間的間距
this.crossAxisAlignment = WrapCrossAlignment.start, //交叉軸上子控件的對(duì)齊方式
this.textDirection, //textDirection水平方向上子控件的起始位置
this.verticalDirection = VerticalDirection.down, //垂直方向上子控件的其實(shí)位置
List<Widget> children = const <Widget>[], //要顯示的子控件集合
})
注意
image.png
image.png
alignment 不管設(shè)置什么屬性都不能調(diào)整第一行的位置
包裹一個(gè)Container來(lái)看翔始，當(dāng)前Wrap沒(méi)有占滿全屏
image.png
return Container(
color: Colors.red,
width: double.infinity,
child: Wrap(
spacing: 10,
runSpacing: 30,
runAlignment: WrapAlignment.end,
alignment: WrapAlignment.spaceAround,
children: [
MyButton("第一季"),
MyButton("第二季"),
MyButton("第一季長(zhǎng)度不一樣"),
MyButton("第三季"),
MyButton("第四季"),
MyButton("第五季"),
MyButton("第六季"),
MyButton("第六季"),
MyButton("第六季"),
MyButton("第六季"),
MyButton("第六季"),
MyButton("第六季"),
],
),
把Container占滿全屏才表現(xiàn)下面效果
image.png
Flow
我們一般很少會(huì)使用Flow罗心，因?yàn)槠溥^(guò)于復(fù)雜里伯，需要自己實(shí)現(xiàn)子組件的位置轉(zhuǎn)換，所以在很多場(chǎng)景下首先要考慮的是Wrap是否滿足需求渤闷。Flow主要用于一些需要自定義布局策略或性能要求較高（如動(dòng)畫中）的場(chǎng)景疾瓮。
Flow({
Key key,
@required this.delegate,
List<Widget> children = const <Widget>[],
})
class MyFlowDelegate extends FlowDelegate {
@override
void paintChildren(FlowPaintingContext context) {
//計(jì)算每一個(gè)子widget的位置
for (int i = 0; i < context.childCount; i++) {
}
}
@override
bool shouldRepaint(covariant FlowDelegate oldDelegate) {
return oldDelegate != this;
}
@override
getSize(BoxConstraints constraints){
//指定Flow的大小
return Size(double.infinity,200.0);
}
}
