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

Question

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

  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 中时，RaisedButton 也会填充 flex space。我不知道哪些属性可能会阻止这种情况。

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

Answer 1

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

A widget that expands a child of a Row, Column, or Flex so that the child fills the available space.

因此，RaisedButton 将填充可用的 space。

你试图用 Container 包裹按钮，但看看 Container 的文档是怎么说的，以防它有 child:

(in that case) the widget has a child but no height, no width, no constraints, and no alignment, and the Container passes the constraints from the parent to the child and sizes itself to match the child.

因此，RaisedButton 将从 Container 的 parent 中获取约束，即填充可用的 space。

您需要用一个小部件包裹 RaisedButton，该小部件不会自行调整大小以匹配 child 的大小（因为它不会展开）并且不会改变child 的大小（因为 child 可以扩展）。

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

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

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

Keep widget from filling ancestor Expanded in Flutter

flutter

flutter-layout

flutter-widget