为什么另一个 SizedBox 中的 SizedBox 会忽略它的宽度和高度？

Question

当我嵌套两个 SizedBox 时，内框的宽度和高度将被忽略。为什么会这样，我该如何解决它？

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
        child: SizedBox(
      width: 300,
      height: 500,
      child: SizedBox(
          width: 200, height: 200, child: Container(color: Colors.green)),
    ));
  }
}

在此示例中，我有一个 300x500 大小的盒子和一个内部 200x200 大小的盒子。在图中，您可以看到绿色框是外部 SizedBox 的大小，但实际上应该是 200x200 的正方形。

Answer 1

According to flutter documentation：如果给定一个孩子，这个小部件会强制它具有特定的宽度和/或高度。如果此小部件的父级，这些值将被忽略does not permit them。例如，如果父级是屏幕（强制子级与父级具有相同的大小）或另一个 SizedBox（forces其子级具有特定的宽度和/或高度），则会发生这种情况。这可以通过将子 SizedBox 包装在一个小部件中来解决，该小部件可以将permit其设置为不超过父级大小的任何大小，例如Center or Align.

所以用 center 包裹 child 就可以解决问题：

Center(
        child: SizedBox(
          width: 300,
          height: 500,
          child: Center(
            child: SizedBox(
                width: 200, height: 200, child: Container(color: Colors.green)),
          ),
        )),

Answer 2

问题是，SizedBox 只能在父级设置的约束范围内设置小部件大小。许多小部件（例如 Padding）希望其子部件占据 100% 的可用空间。这是有道理的，因为如果孩子还小，他们就不知道把它放在哪里。

如果您希望子项小于父项，您可以使用居中或对齐，例如替换