本文介绍了防止小部件填充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 填充可用空间.

所以,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:

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

所以,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:

  • 换行
  • 无约束框
  • ColumnmainAxisSize: MainAxisSize.min
  • CenterheightFactor: 1.0.
  • AlignheightFactor: 1.0.
  • Row
  • Wrap
  • UnconstrainedBox
  • Column with mainAxisSize: MainAxisSize.min
  • Center with heightFactor: 1.0.
  • Align with heightFactor: 1.0.

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

06-03 19:35
查看更多