防止小部件填充Flutter中扩展的祖先

Posted 2023-02-23

【中文标题】防止小部件填充Flutter中扩展的祖先

【英文标题】：Keep widget from filling ancestor Expanded in Flutter

【发布时间】：2020-02-22 13:27:43

【问题描述】：

如何防止RaisedButton 扩展以填充包含它的Expanded？我想创建与可用空间成正比的三列宽度，但我希望每列中的子级为其自然大小，而不占用其父级Expanded 的整个宽度。

  Widget _controls(BuildContext cx) 
    return Row(
      children: [
        Expanded(
          flex: 1,
          child: player.isOnFirstItem
              ? Container()
              : IconButton(
                  icon: Icon(Icons.arrow_back),
                  onPressed: () => control.gotoPreviousItem(),
                ),
        ),
        Expanded(
          flex: 4,
          child: player.isComplete()
              ? Text(player.currentItem.status) // I'll be adding more here
              : RaisedButton(
                  child: Text(player.currentItem.actionText),
                  onPressed: () => player.currentItem.action(),
                ),
        ),
        Expanded(
          flex: 1,
          child: player.isOnLastItem
              ? Container()
              : IconButton(
                  icon: Icon(Icons.arrow_forward),
                  onPressed: () => player.gotoNextItem(),
                ),
        ),
      ],
    );

当我进一步将Container 嵌套在Container 中时，RaisedButton 也会填充弹性空间。我不知道哪些属性可能会阻止这种情况。

四处寻找答案，似乎每个人都在试图完成相反的事情。

【问题讨论】：

我注意到该帖子被编辑为将类名表示为代码。这似乎是 GitHub 问题和 Medium 文章中的一种约定不将类名显示为代码。我为 Medium 写了几篇文章，首先将类名表达为代码，但发现很难阅读。在检查了许多其他文章的约定后，发现很少有人这样做，因此删除了代码格式。男孩让一切都变得更干净了。

我不确定 *** 中对类的官方约定是什么，我看到人们将它们格式化为代码，我开始对任何与代码相关的东西做同样的事情，比如在提到方法时。但是，如果您认为另一种方式更好，请随时编辑您的帖子。

【参考方案1】：

看看Expanded 的文档是怎么说的：

扩展 Row、Column 或 Flex 的子项的小部件，以便 child 填充可用空间。

所以，RaisedButton 将填满可用空间。

您尝试使用Container 包裹按钮，但请查看Container 的文档以防它有一个孩子：

（在这种情况下）小部件有一个孩子，但没有高度，没有宽度，没有约束，也没有 对齐，并且容器将约束从父级传递到 孩子和自己的大小以匹配孩子。

因此，RaisedButton 将从 Container 的父级获取约束，即填充可用空间。

您需要用一个小部件包裹RaisedButton，该小部件的大小与孩子的大小不匹配（因为它不会扩展）并且不会改变孩子的大小（因为孩子可以扩张）。

因此，一些用于包装满足这些条件的RaisedButton 的小部件可能是：

Row Wrap UnconstrainedBox Column 与 mainAxisSize: MainAxisSize.min Center 和 heightFactor: 1.0。 Align 和 heightFactor: 1.0。

【讨论】：

做到了！我刚刚添加了一个中心。我想我错过了小部件的这方面。非常感谢。

UnconstrainedBox 为我解决了问题。谢谢！