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

Posted 2023-02-23

【中文标题】Flutter：需要解释为啥 Expanded() 修复了由 Row() 小部件作为受约束的 Column() 小部件的子项引起的异常

【英文标题】：Flutter: Need Explanation for Why Expanded() Fixes Exception Caused By Row() Widget As A Child Of A Constrained Column() WidgetFlutter：需要解释为什么 Expanded() 修复了由 Row() 小部件作为受约束的 Column() 小部件的子项引起的异常

【发布时间】：2021-05-13 00:20:13

【问题描述】：

我在将 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，但我仍在为它的布局算法的本质而苦苦挣扎。

/小何塞

【参考方案1】：

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

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

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

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

【参考方案2】：

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

【讨论】：

谢谢@losif Pop 的这篇文章，但我已经阅读了它，他们对 BoxConstraints() 和 Expanded() 的使用符合文档。上面提到的场景似乎有所不同，尽管 Expanded() 似乎让底层 Row() 遵守其父级的约束。但我确实再次浏览了这篇文章，得到了一个很好的建议：追踪 Flutter 代码。我只是鼓起勇气这样做，因为我害怕得到更多的混乱而不是清晰。