我有以下代码可以在我的应用程序中创建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),
    );
  }
}

flutter - flutter:将一个FlatButton与Column作为子项放在AppBar中打破布局-LMLPHP
我想将Column()用作FlatButton()的子级,以便Text()显示在Icon()的下面,而不是旁边。
当我将Row()更改为Column()时,得到以下结果:
flutter - flutter:将一个FlatButton与Column作为子项放在AppBar中打破布局-LMLPHP
我在这里做错什么了?

最佳答案

默认情况下,Column小部件会填充所有可能的空间。您可以将它传递给一个mainAxisSizemainAxisSize.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),
    );
  }
}

10-07 19:41
查看更多