我有以下代码可以在我的应用程序中创建BottomAppBar,这很好。
class MyBottomAppBar extends StatelessWidget {
@override
Widget build(BuildContext context) {
final List<Widget> rowContents = <Widget> [
new FlatButton(
onPressed: () {
},
padding: EdgeInsets.all(10.0),
child: new Row(
children: <Widget>[
new Icon(Icons.menu),
new Text("Feed")
],
),
),
const Expanded(child: const SizedBox()),
new FlatButton(
onPressed: () {
},
padding: EdgeInsets.all(10.0),
child: new Row(
children: <Widget>[
new Icon(Icons.people),
new Text("Profile")
],
),
),
];
return new BottomAppBar(
hasNotch: true,
child: new Row(children: rowContents),
);
}
}
我想将
Column()
用作FlatButton()
的子级,以便Text()
显示在Icon()
的下面,而不是旁边。当我将
Row()
更改为Column()
时,得到以下结果:我在这里做错什么了?
最佳答案
默认情况下,Column
小部件会填充所有可能的空间。您可以将它传递给一个mainAxisSize
或mainAxisSize.min
来告诉小部件尽可能少占用空间。
这是代码的修订版本,可以按您的需要工作:
class MyBottomAppBar extends StatelessWidget {
@override
Widget build(BuildContext context) {
final List<Widget> rowContents = <Widget> [
new FlatButton(
onPressed: () {
},
padding: EdgeInsets.all(10.0),
child: new Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
new Icon(Icons.menu),
new Text("Feed")
],
),
),
const Expanded(child: const SizedBox()),
new FlatButton(
onPressed: () {
},
padding: EdgeInsets.all(10.0),
child: new Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
new Icon(Icons.people),
new Text("Profile")
],
),
),
];
return new BottomAppBar(
hasNotch: true,
child: new Row(children: rowContents),
);
}
}