/**
* 一般用在流式布局中,比如标签,瀑布流等
Flow({
Key key,
@required this.delegate,//绘制子view
List<Widget> children = const <Widget>[],
})
*/
body: Flow(
delegate: TestFlowDelegate(margin: EdgeInsets.all(10.0)),
children: <Widget>[
Container(width: 30.0, height: 40.0, color: Color(0xffff0000),),
Container(width: 50.0, height: 40.0, color: Color(0xff00ff00),),
Container(width: 70.0, height: 40.0, color: Color(0xff0000ff),),
Container(width: 50.0, height: 40.0, color: Color(0xffffff00),),
Container(width: 50.0, height: 40.0, color: Color(0xffff0000),),
Container(width: 80.0, height: 40.0, color: Color(0xffff00ff),),
Container(width: 50.0, height: 40.0, color: Color(0xffff0000),),
Container(width: 50.0, height: 40.0, color: Color(0xff0000ff),),
],
),
class TestFlowDelegate extends FlowDelegate {
EdgeInsets margin = EdgeInsets.zero;
TestFlowDelegate({this.margin});
@override
void paintChildren(FlowPaintingContext context) {
var x = margin.left;
var y = margin.top;
for (var i = 0; i < context.childCount; i++) {
var w = x + context
.getChildSize(i)
.width + margin.right;
if (w < context.size.width) {
context.paintChild(
i, transform: new Matrix4.translationValues(x, y, 0.0));
x = w + margin.left;
} else {
x = margin.left;
y = y + context
.getChildSize(i)
.height + margin.bottom;
context.paintChild(
i, transform: new Matrix4.translationValues(x, y, 0.0));
x = x + context
.getChildSize(i)
.width + margin.right + margin.left;
}
}
}
@override
bool shouldRepaint(FlowDelegate oldDelegate) {
return oldDelegate != this;
}
// 是否需要重新布局。
@override
bool shouldRelayout(FlowDelegate oldDelegate) {
return super.shouldRelayout(oldDelegate);
}
//设置Flow的尺寸
@override
Size getSize(BoxConstraints constraints) {
return super.getSize(constraints);
}
// 设置每个child的布局约束条件
@override
BoxConstraints getConstraintsForChild(int i, BoxConstraints constraints) {
return super.getConstraintsForChild(i, constraints);
}
}
网友评论