我在我的应用程序中有以下代码用于创建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()
时,我得到以下结果:
我在这里做错了什么?
答案 0 :(得分:2)
默认情况下,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),
);
}
}