Flutter：需要解释为什么 Expanded() 修复了由 Row() 小部件作为受约束的 Column() 小部件的子项引起的异常

Question

我在将 Row() 小部件嵌入为受 ConstrainedBox(maxHeight) 约束的父 Column() 小部件的子部件时遇到问题:150) 小部件。

在这种情况下，我得到一个“BoxConstraints 强制无限高度。”例外。

这是简化的代码（为简洁起见，我只包括 build() 方法）：

  @override
  Widget build(BuildContext context) {
    return ConstrainedBox(
      constraints: BoxConstraints(maxHeight: 150),
      child: Column(
        mainAxisSize: MainAxisSize.max,
        children: [
          Container(
            color: Colors.yellow,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                Text("Hello"),
                Text("There"),
              ],
            ),
          ),
        ],
      ),
    );
  }

我读过一篇建议使用 Expanded() 来解决异常的帖子，所以我用 Expanded() 包装了上面的 Container() 小部件，这很有效，但我的问题是为什么？

我的印象是 Expanded() 只是强制其关联的子窗口小部件占据其父窗口的所有可用空间。但它是否也让其子小部件识别其父小部件的约束？

这个场景的另一个有趣的方面是，如果我用 Expanded() 而不是 Container() 包装 Row()，它将不起作用并且会抛出异常。无论出于何种原因，它必须是 Container()。

非常感谢所有帮助。我喜欢 Flutter，但我仍在为它的布局算法的本质而苦苦挣扎。

/小何塞

Answer 1

这是因为 Rows 和 Columns 会根据它们的子元素不断扩展， 对于 Row：- 它会继续水平扩展，您通常会看到它溢出到屏幕右侧。

对于 Column：- 它会保持垂直扩展，并且通常会溢出底部。

使用 Expanded 会强制 Row 和 Column 无限扩展，所以会出现异常。容器是不同的，因为它会跟随它的父级的宽度和高度。

https://flutter.dev/docs/development/ui/layout

Answer 2

在我找到this article 之前，我在理解 Flutter 中的约束时也遇到了很多问题。过了一会儿，我看到 Flutter 团队在他们的文档中添加了article。看看，挺好的。