Flutter中如何消除Column子组件间的间隙？

这个间隙是因为ListView.builder默认带有顶部内边距（Material Design的默认样式）导致的，你可以通过以下方式消除：

修改方案 #

给ListView.builder添加padding: EdgeInsets.zero，移除其默认的内边距即可。

修改后的完整代码 #

Material(
  color: const Color.fromARGB(128, 0, 0, 0),
  child: Padding(
    padding: const EdgeInsets.only(top: 56.0, right: 150.0),
    child: Column(
      children: [
        Container(
          height: 40,
          color: Colors.white,
          child: Row(
            children: const [
              Padding(
                padding: EdgeInsets.only(left: 16.0),
                child: Text('Select a new grocery list:'),
              ), // Padding
            ],
          ), // Row
        ), // Container
        ListView.builder(
              padding: EdgeInsets.zero, // 添加这一行移除默认内边距
              shrinkWrap: true,
              itemBuilder: (context, index) {
                return Container(
                  decoration: BoxDecoration(
                    border: Border(
                      bottom: BorderSide(color: Colors.grey.shade700),
                    ), // Border
                  ), //BoxDecoration
                  child: ListTile(
                    visualDensity: VisualDensity.compact,
                    title: Text(groceryListNames[index]),
                    textColor: Constants.kDarkBlueTextColor,
                    tileColor: Colors.white,
                    onTap: () {
                      Navigator.pop(context, groceryListNames[index]);
                    },
                  ), // ListTile
                ); // Container
              },
              itemCount: groceryListNames.length),
      ],
    ), // Column
  ), // Padding
), // Material

如果添加后仍有细微间隙，可以给外层Column加上crossAxisAlignment: CrossAxisAlignment.stretch，让子组件宽度完全对齐，避免布局对齐产生的额外空间：

Column(
  crossAxisAlignment: CrossAxisAlignment.stretch, // 添加此行
  children: [
    // ... 原有子组件
  ],
)

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