问题描述
如何防止 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:
行
换行
无约束框
Column
和mainAxisSize: MainAxisSize.min
Center
与heightFactor: 1.0
.Align
与heightFactor: 1.0
.
Row
Wrap
UnconstrainedBox
Column
withmainAxisSize: MainAxisSize.min
Center
withheightFactor: 1.0
.Align
withheightFactor: 1.0
.
这篇关于防止小部件填充Flutter中扩展的祖先的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!