[英]Keep widget from filling ancestor Expanded in Flutter
How do I keep a RaisedButton
from expanding to fill an Expanded
that contains it?如何防止RaisedButton
扩展以填充包含它的Expanded
? 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
.我想创建与可用空间成正比的三列宽度,但我希望每列中的子级为其自然大小,而不消耗其父级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(),
),
),
],
);
The RaisedButton
also fills the flex space when I further nest it within a Container
.当我进一步将RaisedButton
嵌套在Container
中时,它也会填充 flex 空间。 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.到处寻找答案,似乎每个人都在试图完成相反的事情。
Look what the documentation of Expanded
says:看看Expanded
的文档是怎么说的:
A widget that expands a child of a Row, Column, or Flex so that the child fills the available space.扩展 Row、Column 或 Flex 的子项以使子项填充可用空间的小部件。
So, the RaisedButton
will fill the available space.因此, RaisedButton
将填充可用空间。
You tried to wrap the button with Container
, but look what the documentation of Container
says in case it has a child:您尝试使用Container
包装按钮,但请查看Container
的文档以防它有一个孩子:
(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. (在这种情况下)小部件有一个孩子,但没有高度、宽度、约束,也没有 alignment,并且容器将约束从父级传递给子级,并调整自身的大小以匹配子级。
So, the RaisedButton
will take the constraints from the parent of the Container
, which is to fill the available space.因此, RaisedButton
将从Container
的父级获取约束,即填充可用空间。
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:因此,一些用于包装满足这些条件的RaisedButton
的小部件可能是:
Row
Wrap
UnconstrainedBox
Column
with mainAxisSize: MainAxisSize.min
具有 mainAxisSize 的Column
mainAxisSize: MainAxisSize.min
Center
with heightFactor: 1.0
.以heightFactor: 1.0
为Center
。Align
with heightFactor: 1.0
.与heightFactor: 1.0
Align
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.