Flutter自定义布局排列:多个子View-爱代码爱编程
简单例子:该例子让多个子View垂直排列
class LinearLayout extends MultiChildRenderObjectWidget {
LinearLayout({
Key key,
List<Widget> child
}): super(key: key , children: child);
@override
RenderObject createRenderObject(BuildContext context) => RenderLayout();
}
class PageParentData extends ContainerBoxParentData<RenderBox> {}
class RenderLayout extends RenderBox with ContainerRenderObjectMixin<RenderBox, PageParentData>,RenderBoxContainerDefaultsMixin<RenderBox, PageParentData>{
@override
void setupParentData(RenderBox child) {
if (child.parentData is! PageParentData)
child.parentData = PageParentData();
}
@override
void performLayout() {
//测量自身大小
size = constraints.constrain(Size(double.infinity,double.infinity));
double dx = 0, dy = 0;
RenderBox child = firstChild;
while(child != null) {
PageParentData childParentData = child.parentData;
child.layout(constraints.heightConstraints(), parentUsesSize: true);
//设置子View的坐标
childParentData.offset = Offset(dx, dy);
//dx += child.size.width;
dy += child.size.height;
child = childParentData.nextSibling;
}
}
@override
void paint(PaintingContext context, Offset offset) {
defaultPaint(context, offset);
}
}
使用:
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xffffffff),
body: Container(
child: LinearLayout(
child: <Widget>[
Text(
"第一行第一行第一行第一行"
),
Text(
"第二行第二行第二行第二行第二行"
),
Text(
"第三行第三行第三行第三行第三行第三行第三行"
)
],
),
),
);
}
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 本文链接: https://blog.csdn.net/qq_16009381/article/details/111101404