防止小部件填充Flutter中扩展的祖先 [英] Keep widget from filling ancestor Expanded in Flutter

问题描述

如何防止 RaisedButton 展开以填充包含它的 Expanded?我想创建与可用空间成正比的三列宽度，但我希望每列中的子项都具有其自然大小，而不会消耗其父项 Expanded 的整个宽度.

How do I keep a RaisedButton from expanding to fill an Expanded that contains it? I want to create three columns of widths proportional to the space available, but I want the child in each column to be its natural size, without consuming the entire width of its parent 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(),
                ),
        ),
      ],
    );

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

The RaisedButton also fills the flex space when I further nest it within a Container. I can't figure out which properties might prevent this.

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

Searching around for answers, it seems that everyone is trying to accomplish just the opposite.

推荐答案

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

Look what the documentation of Expanded says:

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

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

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

So, the RaisedButton will fill the available space.

您尝试使用 Container 包装按钮，但请查看 Container 的文档以防它有子项:

You tried to wrap the button with Container, but look what the documentation of Container says in case it has a 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 的父级获取约束，即填充可用空间.

So, the RaisedButton will take the constraints from the parent of the Container, which is to fill the available space.

您需要用一个小部件包装 RaisedButton，该小部件的大小与孩子的大小不匹配(因为它不会扩展)并且不会改变孩子的大小(因为孩子可以扩大).

What you need is to wrap the RaisedButton with a widget that doesn't size itself to match the child's size (because it won't expand) and doesn't alter the size of the child (because the child could expand).

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

So, some widgets to wrap the RaisedButton that meets these conditions could be:

• 行
• 换行
• 无约束框
• Column 和 mainAxisSize: MainAxisSize.min
• Center 与 heightFactor: 1.0.
• Align 与 heightFactor: 1.0.

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

这篇关于防止小部件填充Flutter中扩展的祖先的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！