Flutter如何让Row/Column填满全屏 解决布局存在间隙问题

组件和屏幕边界的间隙和AppBar本身无关，是两个Flutter默认布局规则导致的：

• Scaffold默认会给body区域预留系统UI的安全空间
• 所有可滚动组件（SingleChildScrollView、ListView等）默认会自动添加基于MediaQuery的安全区内边距，避让状态栏、屏幕挖孔/刘海区域

不需要手动通过MediaQuery计算屏幕尺寸、减去AppBar/状态栏高度做适配，只需要做3处调整就能让Row、Column填满AppBar下方的全部可用空间，消除边界间隙：

• 给Scaffold添加extendBody: true属性，放开body的空间占用限制
• 给所有可滚动组件设置padding: EdgeInsets.zero，清除组件默认自带的安全区边距
• 修复原代码中第一个Expanded组件处误插入的图片占位语法错误，避免编译失败

修正后的可运行代码如下：

Widget build(BuildContext context) {
  return Scaffold(
    extendBody: true,
    appBar: AppBar(),
    body: Column(
      children: [
        Expanded(
          child: Column(
            children: [
              Text("Balance"),
              SingleChildScrollView(
                scrollDirection: Axis.horizontal,
                padding: EdgeInsets.zero,
                child: Row(
                  children: [
                    ...coins
                        .map((crypto) => CryptoCard(
                              coin: crypto["coin"],
                              name: crypto["name"],
                              value: crypto["value"],
                              nr: crypto["nr"],
                            ))
                        .toList(),
                  ],
                ),
              ),
            ],
          ),
        ),
        Expanded(
          flex: 2,
          child: ListView.builder(
              padding: EdgeInsets.zero,
              itemCount: transfers.length,
              itemBuilder: (context, index) {
                return Trans(
                    url: transfers[index]["coin"],
                    transName: transfers[index]["name"],
                    amount: transfers[index]["value"]);
              }),
        ),
      ],
    ),
    floatingActionButton: FloatingActionButton(
      onPressed: () {},
      child: Icon(Icons.add),
    ),
  );
}

• 适配性更强，不会因为不同设备的状态栏高度、AppBar自定义高度变化出现布局计算错误
• 灵活度更高，如果后续需要部分内容避让刘海/状态栏，只需要给对应模块包裹SafeArea组件即可，不需要修改全局布局逻辑

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