为什么另一个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: SizedBox(
          width: 300,
          height: 500,
          child: Center(
            child: SizedBox(
                width: 200, height: 200, child: Container(color: Colors.green)),
          ),
        )),

Answer 2

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

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

Answer 3

我遇到了同样的问题，我使用 FractionallySizedBox 类解决了我的问题。

您可以使用上述

SizedBox

的分数指定合适的尺寸，如

widthFactor

和

heightFactor

:

Widget build(BuildContext context) {
    return SizedBox.expand(
      child: FractionallySizedBox(
        widthFactor: 0.5,
        heightFactor: 0.5,
        alignment: FractionalOffset.center,
        child: DecoratedBox(
          decoration: BoxDecoration(
            border: Border.all(
              color: Colors.blue,
              width: 4),
          ),
        ),
      ),
    );
  }

Answer 4

像 Row 和 Column 这样的小部件默认为它们的子组件提供灵活的约束，这意味着它们尝试将子组件放入可用空间内，但它们也允许子组件根据其大小行为（例如，内在大小或灵活大小）占用更多或更少的空间尺寸）。如果在行或列中使用 SizedBox，它可能不会缩小到所需的大小，除非对其宽度或高度明确定义约束。在使用 MediaQuery 固定大小的情况下，如果不涉及 Expanded 等灵活的小部件，它应该按预期工作。

扩展小部件：此小部件尝试填充尽可能多的可用空间，因此它会覆盖其子部件的固定大小，除非子部件受到明确约束。如果 SizedBox 位于 Expanded 内，则它可能会被迫占用比预期更多的空间。

如果观察到这些行为，则可以将 SizedBox 包装在 Center 或 Align 下。最终，Center 的目的是将其从父级（屏幕）收到的严格约束转变为其子级的宽松约束。 （https://docs.flutter.dev/ui/layout/constraints#loose-constraints）