流式布局很经典了，Flutter 提供了2种方式，Wrap 用着省事，weightTree 里配置就行了，Flow 可以自定义显示，需要自己写代码
Wrap
Wrap 好写，子 view 写死，不知道有没有可以代码动态添加的实现方式。Wrap 和 Flow 其实和 row、colume 产不多，就是多了可以自动换行的选项，属性的话大家参照 row、colume 理解
先看属性：
Wrap({
...
this.direction = Axis.horizontal,
this.alignment = WrapAlignment.start,
this.spacing = 0.0,
this.runAlignment = WrapAlignment.start,
this.runSpacing = 0.0,
this.crossAxisAlignment = WrapCrossAlignment.start,
this.textDirection,
this.verticalDirection = VerticalDirection.down,
List<Widget> children = const <Widget>[],
})
-
direction- 这个是方向，一般我们都是用在横向的多 -
alignment- 主轴对齐方式，参考 row、colume 的 -
spacing- 主轴方向每个 weight 间隔 -
runSpacing- 交叉轴方向间隔，在横向时这玩意就是行间距 -
runAlignment、crossAxisAlignment- 我试了试没啥用，有alignment就够用了
class AText extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
alignment: Alignment.center,
width: 100,
height: 40,
color: Colors.blueAccent,
child: Text("AAAAAA"),
);
}
}
class AA extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Wrap(
spacing: 25,
runSpacing: 5,
direction: Axis.horizontal,
alignment: WrapAlignment.spaceEvenly,
children: <Widget>[
AText(),
AText(),
AText(),
AText(),
AText(),
AText(),
AText(),
],
);
}
}
Wrap 使用上很方便，一般能用 Wrap 就用 Wrap，虽说 Wrap 能实现的 Flow 也一样 OK，但是 Flow 需要自己写代码实现换行
Flow
我们一般很少会使用Flow，因为其过于复杂，需要自己实现子widget的位置转换，在很多场景下首先要考虑的是Wrap是否满足需求。Flow主要用于一些需要自定义布局策略或性能要求较高(如动画中)的场景
其实我对 Flow 并不熟悉，据说 Flow 性能比 Wrap 要好，具体的我也没看懂，下面是原话：
性能好；Flow是一个对child尺寸以及位置调整非常高效的控件，Flow用转换矩阵（transformation matrices）在对child进行位置调整的时候进行了优化：在Flow定位过后，如果child的尺寸或者位置发生了变化，在FlowDelegate中的paintChildren()方法中调用context.paintChild 进行重绘，而context.paintChild在重绘时使用了转换矩阵（transformation matrices），并没有实际调整Widget位置
flow 抽象了一个接口 FlowDelegate 用来定位子 view 的位置，FlowDelegate 接口里最重要的就是 paintChildren()方法了，在这个方法里我们遍历所有子 view 计算他们的位置，然后根据自己的意愿换行还是换列，能自定义效果
但是 flow 非常蛋疼的地方在于无法支持子 view 自定义大小，所有子 view 必须统一设置宽高值，这在实际中怎么可能啊，getSize 方法返回子view 宽高大小
演示图
这里我们给 FlowDelegate 接口传入横向间距和纵向间距
class AA extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Flow(
// 这里我们给 FlowDelegate 接口传入横向间距和纵向间距
delegate: ADelegate(10, 10),
children: <Widget>[
new Container(width: 80.0, height:80.0, color: Colors.red,),
new Container(width: 80.0, height:80.0, color: Colors.green,),
new Container(width: 80.0, height:80.0, color: Colors.blue,),
new Container(width: 80.0, height:80.0, color: Colors.yellow,),
new Container(width: 80.0, height:80.0, color: Colors.black,),
new Container(width: 80.0, height:80.0, color: Colors.purple,),
],
);
}
}
FlowDelegate 接口不是照搬网上的，是我自己写的，看着还算工整，网上的代码风格太乱，没法看
class ADelegate extends FlowDelegate {
var wSpacing = 0.0;
var hSpacing = 0.0;
ADelegate(this.wSpacing, this.hSpacing);
@override
void paintChildren(FlowPaintingContext context) {
var pWidth = context.size.width;
var x = 0.0;
var y = 0.0;
var childWidth = 0.0;
var childSize = new Size(0, 0);
for (int i = 0; i < context.childCount; i++) {
childSize = context.getChildSize(i);
childWidth = x + childSize.width;
// 子 view 的宽度要是比父控件的 width 还大就得换行了
if (childWidth <= pWidth) {
// 不换行，定位子 view 位置
context.paintChild(I,
transform: new Matrix4.translationValues(x, y, 0.0));
// 然后把 x 坐标偏移量算出来
x = childWidth + wSpacing;
} else {
// 此时换行了，先重置 x 坐标偏移量
x = 0;
// 因为要显示在当前行的下一行，就得先把下一行起始 Y 坐标算出来
y = y + childSize.height + hSpacing;
context.paintChild(I,
transform: new Matrix4.translationValues(x, y, 0.0));
// 然后别忘了计算 x 坐标偏移量
x = childSize.width + wSpacing;
}
}
}
getSize(BoxConstraints constraints) {
//指定Flow的大小
return Size(double.infinity, 200.0);
}
@override
bool shouldRepaint(FlowDelegate oldDelegate) {
return oldDelegate != this;
}
}
网友评论