Flutter中如何消除两个Container组件之间的多余空白？

空白产生的原因 #

1. 第二个Container的margin设置：你给第二个Container添加了margin: const EdgeInsets.all(20)，这个属性会给容器的上、下、左、右四个方向都设置20的空白区域，其中顶部的margin直接导致它和第一个Container之间出现了20的间距。
2. Column的居中布局：外层Column设置了mainAxisAlignment: MainAxisAlignment.center，当两个Container的总高度小于屏幕高度时，Column会将子组件垂直居中排列，这会额外拉大组件之间的空白。

消除空白的方法 #

方法一：调整第二个Container的margin #

把第二个Container的全方向margin改成仅给左右和底部设置，顶部设为0，直接去掉组件间的顶部间距：

margin: const EdgeInsets.fromLTRB(20, 0, 20, 20),

方法二：修改Column的对齐方式 #

如果不需要整体界面垂直居中，可以移除Column的mainAxisAlignment: MainAxisAlignment.center配置，默认的MainAxisAlignment.start会让组件从屏幕顶部开始排列，避免居中带来的额外空白。

方法三：结合两种方式（推荐） #

既调整margin去掉顶部空白，又根据需求保留或调整Column的对齐方式，比如保留整体居中但去掉第二个Container的top margin，这样既能保证界面居中，又能消除组件间的多余间距。

修改后的核心代码片段：

body: Center(
    child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
            Container(
               padding: const EdgeInsets.all(10),
               alignment: Alignment.center,
               width: MediaQuery.of(context).size.width,
               decoration: BoxDecoration(
                   color: Colors.grey.shade400,
                   border: Border.all(
                       color: Colors.black,
                       width: 1.5),
               ),
               child: const Text("EMPLOYEE DETAILS",style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontFamily: 'Lobster')),
            ),     
            Container(
               // 调整margin，移除顶部空白
               margin: const EdgeInsets.fromLTRB(20, 0, 20, 20),
               alignment: Alignment.center,
               width: MediaQuery.of(context).size.width,
               decoration: BoxDecoration(
                   color: Colors.blue.shade300,
                   border: Border.all(
                       color: Colors.black,
                       width: 1.0),
               ),
               child:Table(
                   border: TableBorder.all(
                       color: Colors.black,
                       style: BorderStyle.solid,
                       width: 2),
                   children: [
                       TableRow( children: [
                           Column(children:const [Text('Employee No')]),
                           Column(children:const [Text('NULL')]),
                       ]),
                       TableRow( children: [
                           Column(children:const [Text('Employee Name')]),
                           Column(children:const [Text('NULL')]),
                       ]),
                       TableRow( children: [
                           Column(children:const [Text('Designation')]),
                           Column(children:const [Text('NULL')]),
                       ]),
                       TableRow( children: [
                           Column(children:const [Text('Department')]),
                           Column(children:const [Text('NULL')]),
                       ]),
                       TableRow( children: [
                           Column(children:const [Text('BU/Station')]),
                           Column(children:const [Text('NULL')]),
                       ]),
                       TableRow( children: [
                           Column(children:const [Text('Qtr No')]),
                           Column(children:const [Text('NULL')]),
                       ]),
                  ],
            ),
         ),

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