Flutter中如何实现Stack在Expanded内零边距适配及响应式重叠布局

开发者在Flutter开发过程中尝试将Stack组件嵌套在Expanded组件内部，观察到Expanded似乎会让Stack组件带有默认边距，无法完全贴合父级空间范围。当前希望实现Stack组件在Expanded内部零边距适配的效果，同时也希望获取能够实现组件重叠布局、保障应用响应式适配效果的组件选型推荐。

问题核心原因 #

Expanded本身不会为子组件添加任何默认边距，出现无法贴合父级空间的视觉效果，本质是Stack的默认尺寸适配规则导致的：Stack默认会以非定位子组件的尺寸为自身尺寸，而非自动撑满父级分配的约束空间。

零边距适配实现 #

只需要给Stack组件添加fit: StackFit.expand属性，即可让其完全撑满父级（即Expanded分配的全部空间），无任何额外边距，修改后的全量代码如下：

import 'package:WEW/constants.dart';
import 'package:WEW/size_config.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

class Body extends StatefulWidget {
  @override
  _BodyState createState() => _BodyState();
}

class _BodyState extends State<Body> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: SizedBox(
        height: getScreenHeight(),
        width: getScreenWidth(),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            Expanded(
              child: Stack(
                // 新增这一行实现Stack零边距撑满父级空间
                fit: StackFit.expand,
                children: <Widget>[
                  Positioned(
                    top: 0,
                    left: 0,
                    child: Image.asset(
                      "assets/images/welcome_top.png",
                      height: getProportionateScreenHeight(144),
                      width: getProportionateScreenWidth(193),
                    ),
                  ),
                  Positioned(
                    top: 0,
                    left: 0,
                    child: Image.asset(
                      "assets/images/WEW_logo_light.png",
                      height: getProportionateScreenHeight(149),
                      width: getProportionateScreenWidth(228),
                    ),
                  ),
                ],
              ),
            ),
            Expanded(
              flex: 2,
              child: Column(
                children: <Widget>[
                  Text(
                    "Werkgerers & Werknemers",
                    style: TextStyle(
                      fontSize: getProportionateScreenHeight(36),
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  Text("Verbinden van de wereld van logistiek"),
                ],
              ),
            ),
            Expanded(
              child: SizedBox(),
            ),
          ],
        ),
      ),
    );
  }
}

如果设置后仍存在边距，可排查以下布局约束：

• 检查外层SafeArea是否预留了系统状态栏/底部安全区的边距，如需完全贴合屏幕可设置SafeArea的top/bottom/left/right属性为false
• 检查Column的crossAxisAlignment是否设置为非拉伸值，当前代码中已包裹了全尺寸的SizedBox，不会产生该问题

重叠布局+响应式适配组件选型推荐 #

• Stack + Positioned/Align：通用重叠布局方案，搭配已有的size_config比例适配工具，可实现不同屏幕尺寸下的精确位置控制，适合常规页面的元素重叠需求
• Overlay/OverlayEntry：全局悬浮布局方案，不受当前路由层级约束，适合实现悬浮按钮、全局弹窗、引导层等需要悬浮在所有页面元素之上的场景，可通过MediaQuery获取屏幕尺寸做响应式适配
• CustomMultiChildLayout：自定义重叠布局方案，可完全自定义子组件的位置约束规则，适合复杂的多元素重叠、动态适配场景

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