Flutter：部分高度值下导航栏上方出现细线条问题求助

问题根源分析 #

你遇到的1-2像素细线，本质是布局计算偏差导致遮罩层和AppBar没有完全对齐，加上GoRouter ShellRoute的嵌套结构可能引入了额外的布局边距/padding，硬编码增加高度只会触发溢出错误，且无法适配不同设备。

可靠解决方案 #

方案1：用OverlayEntry实现精准遮罩（推荐）

不需要修改现有Scaffold结构，通过Overlay插入遮罩层，精准控制遮罩范围为AppBar以下的区域：

void showDimMask() {
  final overlay = Overlay.of(context);
  // 计算AppBar+状态栏总高度
  final appBarTotalHeight = AppBar().preferredSize.height + MediaQuery.of(context).padding.top;
  final maskEntry = OverlayEntry(
    builder: (_) => Positioned(
      top: appBarTotalHeight,
      left: 0,
      right: 0,
      bottom: 0,
      child: Container(color: Colors.black.withOpacity(0.5)),
    ),
  );
  overlay.insert(maskEntry);
  // 关闭对话框时记得调用 maskEntry.remove() 移除遮罩
}

这种方式完全避开Scaffold和ShellRoute的嵌套布局冲突，适配所有设备。

方案2：调整Stack布局逻辑

如果坚持用Stack包含AppBar和主体内容，需确保布局完全对齐：

Scaffold(
  body: Stack(
    fit: StackFit.expand, // 让Stack占满可用空间
    children: [
      // 原主体内容
      YourMainContent(),
      // 遮罩层：从AppBar底部开始覆盖
      Positioned(
        top: AppBar().preferredSize.height + MediaQuery.of(context).padding.top,
        left: 0,
        right: 0,
        bottom: 0,
        child: Container(color: Colors.black.withOpacity(0.5)),
      ),
      // AppBar放在最上层，避免被遮罩覆盖
      Positioned(
        top: 0,
        left: 0,
        right: 0,
        child: AppBar(
          elevation: 0,
          title: const Text("页面标题"),
        ),
      ),
    ],
  ),
);

• 用StackFit.expand确保Stack无间隙填充父容器
• 通过MediaQuery获取状态栏高度，结合AppBar高度精准定位遮罩顶部，避免硬编码数值

额外检查项 #

1. 检查ShellRoute的父Shell布局，是否存在额外的Padding或SafeArea导致当前页面顶部偏移
2. 确保AppBar没有设置toolbarHeight等自定义高度，若有需同步到遮罩的top计算中

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