Flutter：将Column作为FlatButton子组件放入BottomAppBar致布局异常

我之前写的BottomAppBar代码运行完全正常，效果是底部导航栏的两个按钮（Feed和Profile）分别在左右两侧，每个按钮里的图标和文字是并排显示的：

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

（原本的正常效果：BottomAppBar高度合适，左右两个按钮的图标与文字横向排列，中间有适配FAB的缺口）

但我想把每个按钮里的图标和文字改成垂直排列（文字在图标下方），于是把Row替换成了Column，结果就出现了布局问题：BottomAppBar被异常拉长，按钮内容的位置也不对，整体布局完全走样。

问题原因&解决方法 #

出现这个问题的核心原因是Column默认会尽可能占据垂直方向的最大空间，而BottomAppBar的高度是有限制的，同时FlatButton的padding加上Column的默认布局行为，就导致了内容溢出或者导航栏高度异常。

你只需要给Column添加两个关键属性就能解决：

• mainAxisSize: MainAxisSize.min：让Column只包裹住子组件的实际高度，不会无限制拉伸
• mainAxisAlignment: MainAxisAlignment.center：让图标和文字在垂直方向居中对齐，避免偏移

修改后的代码如下：

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,
          mainAxisAlignment: MainAxisAlignment.center,
          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,
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[ 
            new Icon(Icons.people), 
            new Text("Profile") 
          ], 
        ), 
      ), 
    ]; 
    return new BottomAppBar( 
      hasNotch: true, 
      child: new Row(children: rowContents), 
    ); 
  } 
}

这样修改后，Column就只会占用图标和文字需要的垂直空间，BottomAppBar的高度会恢复正常，文字也能正确显示在图标下方啦~

内容的提问来源于stack exchange，提问作者ad_on_is