Question

我有以下代码：

  @override
  Widget build(BuildContext context) => Container(
        height: MediaQuery.of(context).size.height * 0.5,
        width: MediaQuery.of(context).size.width,
        color: Colors.green.withOpacity(0.3),
        child: Container(
          alignment: Alignment.center,
          height: MediaQuery.of(context).size.height * 0.25,
          color: Colors.red.withOpacity(0.3),
        ),
      )

我希望看到一个红色的矩形占据了屏幕的一半，居中于一个绿色的矩形，占据了屏幕的四分之一。但是相反，绿色的部分覆盖了整个一半（与红色的部分大小相同）。

为什么会这样？ ~~在不使用堆栈的情况下如何获得预期的结果？~~

对于更多上下文，我正在尝试解决与GestureDetector在使用Transform小部件进行翻译后无法正确响应的问题： https://github.com/flutter/flutter/issues/27587

编辑：

经过一夜的睡眠，轻松达到预期效果的解决方案很容易，我在内部容器中添加了一些边距，如下所示：

  @override
  Widget build(BuildContext context) => Container(
        height: MediaQuery.of(context).size.height * 0.5,
        width: MediaQuery.of(context).size.width,
        color: Colors.green.withOpacity(0.3),
        child: Container(
          margin: EdgeInsets.symmetric(vertical: MediaQuery.of(context).size.height * 0.25 * 0.5),
          color: Colors.red.withOpacity(0.3),
        ),
      );

但是我对理解为什么第一个代码无法按预期工作的方式更感兴趣。我阅读了Container小部件的源代码，但是找不到任何明显的原因。有人知道吗？

编辑2：

@Pablo Barrera Answers给了我一个想法，尝试将对齐方式添加到第一个容器中（这确实应该是这样）。

这也使第二个容器采用预期的大小，这是意外的。仍然想知道是否有合理的解释。

  @override
  Widget build(BuildContext context) => Container(
        height: MediaQuery.of(context).size.height * 0.5,
        width: MediaQuery.of(context).size.width,
        alignment: Alignment.center,
        color: Colors.green.withOpacity(0.3),
        child: Container(
          height: MediaQuery.of(context).size.height * 0.25,
          color: Colors.red.withOpacity(0.3),
        ),
      );

Answer 1

您可以像这样使用Wrap小部件：

@override
Widget build(BuildContext context) => Container(
  alignment: Alignment.center,
  height: MediaQuery.of(context).size.height * 0.5,
  width: MediaQuery.of(context).size.width,
  color: Colors.green.withOpacity(0.3),
  child: Wrap(
    children: <Widget>[
      Container(
        height: MediaQuery.of(context).size.height * 0.25,
        color: Colors.red.withOpacity(0.3),
      ),
    ],
  )
)

编辑：在根容器中添加“ alignment：Alignment.center”时，在幕后将其与Align小部件一起包装，因此不再需要Wrap小部件，因为子容器不会尝试扩展以适合根容器

嵌套容器不遵守尺寸限制

1 个答案: