移除AppBar后两个组件间出现间隙的技术问题求助

问题原因 #

当Scaffold配置有AppBar时，AppBar会自动处理顶部状态栏的间距，body内的组件会紧贴AppBar底部布局。移除AppBar或将其设为null后，Scaffold的body会默认保留顶部状态栏的padding，导致Column中的第一个ListTile被向下偏移，视觉上和下方ListView的间隙变大。另外，ListTile本身默认带有上下内边距，也会加剧这种间隙感。

解决方案 #

方法1：移除顶部默认padding #

通过MediaQuery.removePadding包裹Column，清除顶部的状态栏padding，让组件从屏幕顶部开始布局：

Scaffold(
  appBar: null, // 移除AppBar
  body: MediaQuery.removePadding(
    context: context,
    removeTop: true,
    child: Column(
      children: [
        ListTile(title: Text('顶部条目')),
        Expanded(
          child: ListView.builder(
            itemCount: 5,
            itemBuilder: (context, index) => ListTile(title: Text('列表项 $index')),
          ),
        ),
      ],
    ),
  ),
)

方法2：清除ListTile默认内边距 #

如果间隙来自ListTile自带的内边距，可通过contentPadding将其设为0：

ListTile(
  contentPadding: EdgeInsets.zero,
  title: Text('顶部条目'),
)

方法3：统一Column组件对齐方式 #

给Column设置crossAxisAlignment，避免因对齐方式导致的额外间距：

Column(
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: [
    // 组件内容
  ],
)

完整验证代码 #

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: null,
        body: MediaQuery.removePadding(
          context: context,
          removeTop: true,
          child: Column(
            children: [
              const ListTile(
                contentPadding: EdgeInsets.zero,
                title: Text('顶部条目'),
              ),
              Expanded(
                child: ListView.builder(
                  itemCount: 5,
                  itemBuilder: (ctx, idx) => ListTile(title: Text('列表项 $idx')),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

内容的提问来源于stack exchange，提问作者JUSTIN N THAMPI