我创建了CustomMultiChildLayout
,以自定义其子级的位置。然后尝试将CustomMultiChildLayout
放入Container
到BoxConstraints(maxHeight: 500)
中,然后CustomMultiChildLayout
始终具有maxHeight 500作为高度。它无法根据其子级调整高度。
那么我如何为CustomMultiChildLayout
设置动态高度?如果这不可能,还有其他方法可以实现这种布局吗?
背景:
我定义了3个小部件,每个小部件都是Container
,我需要自定义它们的位置。
SellerWidget应该位于其他两个小部件的中间。
这是我的代码:
class ProductComboWidget extends StatelessWidget {
final Product _product;
ProductComboWidget(this._product);
@override
Widget build(BuildContext context) {
return Container(
constraints: BoxConstraints(maxHeight: 500),
child: CustomMultiChildLayout(
delegate: _TitleInfoLayout(),
children: <Widget>[
LayoutId(
id: _TitleInfoLayout.title,
child: ProductTitleWidget(_product)
),
LayoutId(
id: _TitleInfoLayout.info,
child: ProductInfoWidget(_product)
),
LayoutId(
id: _TitleInfoLayout.seller,
child: SellerWidget(_product.seller)
),
],
),
);
}
}
class _TitleInfoLayout extends MultiChildLayoutDelegate {
static const String title = 'title';
static const String info = 'info';
static const String seller = 'seller';
@override
void performLayout(Size size) {
final Size titleSize = layoutChild(title, BoxConstraints(maxWidth: size.width));
positionChild(title, Offset(0, 0));
layoutChild(info, BoxConstraints(maxWidth: size.width));
positionChild(info, Offset(0, titleSize.height));
final Size sellerSize = layoutChild(seller, BoxConstraints());
positionChild(seller, Offset(size.width - sellerSize.width - 20, titleSize.height - sellerSize.height / 2));
}
@override
bool shouldRelayout(MultiChildLayoutDelegate oldDelegate) {
return true;
}
}
实际结果:
CustomMultiChildLayout
的高度始终等于BoxConstraint.maxHeight,无法根据其子级调整其高度。
此小部件底部没有可用的空白空间。
预期结果:
使其高度适合其子代,就像其他小部件一样。
答案 0 :(得分:1)
受Column
和Stack
的实现启发,我创建了一个自定义布局来完成这项工作。 https://gist.github.com/jxw1102/a9b58a78a80c8e2f54233b418429fa50
答案 1 :(得分:0)
您可以使用SingleChildScrollView
作为父级,以根据子窗口小部件的数量来获取父级的动态高度。