Question

当我阅读Container document的容器布局行为时：

如果该小部件没有子级，没有高度，没有宽度，没有约束，并且父级提供了无限制的约束，那么Container会尝试将大小尽可能的小。

所以我写了一些类似下面的代码，我认为第二个容器应该尽可能小，但是它会填充应用程序的内容区域（整个屏幕），为什么？

class ContainerWithScaffold extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
  title: 'Container with scaffold',
  home: Scaffold(
    body: Container(
      color: Colors.blue,
      height: double.infinity,// provides unbounded height constraints for the child container
      width: double.infinity,// provides unbounded width constraints for the child container
      child: new Container(
        color: Colors.white,
      ),
    ),
  ),
);
}
}

Answer 1

您设置了高度和宽度，请尝试使用UnconstrainedBox

      Container(
                color: Colors.blue,
                height: double
                    .infinity, // provides unbounded height constraints for the child container
                width: double
                    .infinity, // provides unbounded width constraints for the child container
                child: UnconstrainedBox(
                  child: new Container(
                    color: Colors.red,
                  ),
                ),
              ),

更多信息：https://docs.flutter.io/flutter/widgets/UnconstrainedBox-class.html

Answer 2

为显示此处发生的情况，我使用辅助函数扩展了您的代码示例，该函数呼应Container窗口小部件的框约束：

def next(self):
    if self.current is None:
        return None # could be return self.current or even just "return", this is Python
    self.current = self.current.neighbours[self.advance_value]
    return self.current

运行该应用程序时，我得到：

class ContainerWithScaffold extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Container with scaffold',
      home: Scaffold(
        body: printConstraints(
          remark: 'outer',
          context: context,
          child: Container(
            color: Colors.blue,
            height: double.infinity, 
            width: double.infinity, 
            child: printConstraints(
              remark: 'inner',
              context: context,
              child: Container(
                color: Colors.white,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Widget printConstraints({String remark, Widget child, BuildContext context,}) {
  return LayoutBuilder(
      builder: (BuildContext context, BoxConstraints constraints) {
    print('$remark - $constraints');
    return child;
  });
}

从外部容器中删除了height和width参数后，结果为：

I/flutter (11451): outer - BoxConstraints(0.0<=w<=961.5, 0.0<=h<=552.9)
I/flutter (11451): inner - BoxConstraints(w=961.5, h=552.9)

您显然没有删除约束。而是将它们设置为与预期结果相反的最大值。

最后，我将内部容器包装在UnconstrainedBox内，最终得到了所需的结果：

I/flutter (11451): outer - BoxConstraints(0.0<=w<=961.5, 0.0<=h<=552.9)
I/flutter (11451): inner - BoxConstraints(0.0<=w<=961.5, 0.0<=h<=552.9)

现在屏幕上充满了外部的蓝色容器。（请注意：此答案仅用于提供其他信息。diegoveloper的答案已经是该问题的正确解决方案。）

Answer 3

您应用了错误的规则

如果该小部件没有子级，没有高度，没有宽度，没有约束，并且父级提供了无限制的约束，那么Container会尝试将大小尽可能的小。

此规则不适用，因为脚手架为外部容器提供约束，并且通过将外部容器的宽度和高度设置为无穷大，您将内部容器的约束设置为与外部容器的约束支架相同容器。由于存在父约束，因此应该呈现内部容器大小的正确规则。

如果小部件没有子级，没有高度，没有宽度，没有约束并且没有对齐方式，但是父级提供了有限的约束，那么Container会扩展以适合父级提供的约束。

因此内部容器将扩展以适合其父容器

Flutter容器布局行为

3 个答案: