flutter:将一个FlatButton与Column作为子项放在AppBar中打破布局

时间:2018-05-29 20:32:17

标签: flutter

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

enter image description here

我想将Column()用作FlatButton()的孩子,以便Text()显示在Icon()下方而不是旁边。

当我将Row()更改为Column()时,我得到以下结果:

enter image description here

我在这里做错了什么?

1 个答案:

答案 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),
    );
  }
}