我正在尝试创建方形按钮,但Expanded似乎与容器的工作方式不同。以下面的代码为例
new Expanded(
flex: 2,
child: new Column(
children: <Widget>[
new Expanded(
child:new Row(
children: <Widget>[
new Expanded(child: new MaterialButton(...)),
new Expanded(child: new MaterialButton(....)),
new Expanded(child: new Container(color: Colors.red)),
new Expanded(child: new Container(color: Colors.green)),
]
)
)
],
)
)
....
它显示两个水平扩展但不垂直的按钮。同时,容器将水平和垂直扩展。如果我执行以下操作,则会产生相同的效果:
new Expanded(
flex: 2,
child: new Column(
children: <Widget>[
new Expanded(
child:new Column(
children: <Widget>[
new Expanded(child: new MaterialButton(...)),
new Expanded(child: new MaterialButton(....)),
new Expanded(child: new Container(color: Colors.red)),
new Expanded(child: new Container(color: Colors.green)),
]
)
)
],
)
)
....
我把Row改为Column的地方。按钮将垂直展开,但不会水平展开,而容器将同时展开。
有没有办法让我的按钮扩展到垂直和水平适合他们的父母?
将crossAxisAlignment
属性添加到您的Row
;
crossAxisAlignment: CrossAxisAlignment.stretch
使用带有ButtonTheme
的minWidth: double.infinity
进行包装可以提供约束
ButtonTheme(
minWidth: double.infinity,
child: MaterialButton(
onPressed: () {},
child: Text('Raised Button'),
),
),
或者在https://github.com/flutter/flutter/pull/19416降落之后
MaterialButton(
onPressed: () {},
child: SizedBox.expand(
width: double.infinity,
child: Text('Raised Button'),
),
),