Question

我正在扑朔迷离地创建一个新的自定义小部件。我的要求是提供自定义窗口小部件约束作为父窗口小部件约束。

我在这里面临一个小问题，当我将小部件放置在容器（父小部件）中时，我将获得最大高度和最大宽度的正确值，如下所示：

size = Size(this.constraints.maxWidth, constraints.maxHeight);

但是当我将自定义窗口小部件放置在Column或Row Widget内时。我将父约束高度设为无穷大。

当高度变为无穷大时，我将无法渲染我的自定义小部件。这是“列”或“行”小部件中的默认行为吗？请找到我的customWidget代码段

class CustomWigetContainer extends SingleChildRenderObjectWidget {
CustomWigetContainer(
 {
     Widget child
  }): super(child: child);
@override
RenderObject createRenderObject(BuildContext context) {
  return CustomWigetContainerBox();
  }
 }

class CustomWigetContainerBox extends RenderShiftedBox {
 CustomWigetContainerBox() : super(null);

  @override

   void performLayout() {
     child.layout(BoxConstraints(
       minHeight: 0.0,
       maxHeight: constraints.maxHeight,
       minWidth: 0.0,
       maxWidth: constraints.maxHeight
     ), parentUsesSize: true);

    size = Size(this.constraints.maxWidth, constraints
    .maxHeight); // constraints.maxHeight become infinity when widget is placed inside row/column
   }


 @override
  void paint(PaintingContext context, Offset offset) {
    // TODO: implement paint
   super.paint(context, offset);

    final Paint paint = new Paint()
     ..isAntiAlias = true
     ..strokeWidth = 1.0
     ..color = Colors.blue
     ..style = PaintingStyle.fill;
     context.canvas.drawRect(new Rect.fromLTWH(50, 20, 100, 200), paint);
     }
   }

Answer 1

是的，这是 Column 或 Row 小部件沿其主轴线的预期怪异行为，因为 Box约束如何通过“列”或“行”向下传递给他们的孩子。

在您的情况下，由于您取决于父项的约束，因此Column小部件的子项将扩展为 无穷高 ，因为这是Column向下传递的约束子级，对于Row，子级也可以扩展为 无限宽 。这可能是针对不同屏幕的响应能力。

要了解更多信息，我在《 Medium》上写了article，介绍了框约束一般如何工作以及它们如何与列和行一起工作。

希望这会有所帮助！

Answer 2

在放入Column之前，请确保已使用自己喜欢的大小和宽度用Container包装了自定义窗口小部件。

这里是代码：

 home: new Scaffold(
    body: Column(
      children: <Widget>[
        Container(
          height: 150.0,
          width: 120.0,
          child: CustomWigetContainer(
            child: new Text('Hey I am Mir'),
          ),
        ),
      ],
    ),
  )

约束高度在flutter中的行/列小部件中是无穷大

2 个答案: