Flutter/Dart：移除两个Container组件间的细小分隔线

问题原因 #

这种细小分隔线通常是浮点高度计算导致的像素对齐偏差，或是布局间隙暴露了底层背景色。你的代码中用百分比计算容器高度，容易产生非整数像素，触发抗锯齿或缝隙。

解决方案 #

方案1：用Expanded替换固定百分比高度，消除浮点计算误差

将Column中的两个Container用Expanded包裹，按比例分配高度，彻底避免浮点精度问题：

body: Column(
  children: [
    Expanded( // 占总高度的40%，用flex比例2:3对应0.4和0.6
      flex: 2,
      child: Container(
        color: const Color.fromARGB(255, 25, 61, 94),
        child: Container(
          padding: const EdgeInsets.only(bottom: 15),
          decoration: const BoxDecoration(
            borderRadius: BorderRadius.only(
              bottomLeft: Radius.circular(75),
            ),
            color: Colors.white,
          ),
        ),
      ),
    ),
    Expanded( // 占总高度的60%
      flex: 3,
      child: Container(
        color: Colors.white,
        child: Container(
          padding: const EdgeInsets.only(right: 30, left: 30),
          decoration: const BoxDecoration(
              borderRadius: BorderRadius.only(
                topRight: Radius.circular(75),
              ),
              color: Color.fromARGB(255, 25, 61, 94)),
        ),
      ),
    ),
  ],
),

方案2：给上层容器添加微小偏移覆盖缝隙

如果不想改变原有布局结构，给第一个外层Container添加向下偏移1像素的transform，直接覆盖缝隙：

Container(
  height:
      (MediaQuery.of(context).size.height - 56 - safePadding) * 0.4,
  color: const Color.fromARGB(255, 25, 61, 94),
  transform: Matrix4.translationValues(0, 1, 0), // 向下偏移1像素
  child: Container(
    padding: const EdgeInsets.only(bottom: 15),
    decoration: const BoxDecoration(
      borderRadius: BorderRadius.only(
        bottomLeft: Radius.circular(75),
        topRight: Radius.circular(0),
      ),
      color: Colors.white,
    ),
  ),
),

方案3：合并为Stack布局，彻底消除间隙

将两个容器放在Stack中用Positioned定位，从根源避免Column的布局间隙：

body: SizedBox(
  width: double.infinity,
  height: MediaQuery.of(context).size.height - 56 - safePadding,
  child: Stack(
    children: [
      // 底部深蓝色区域（带右上圆角）
      Positioned(
        top: 0.4 * (MediaQuery.of(context).size.height - 56 - safePadding),
        left: 0,
        right: 0,
        bottom: 0,
        child: Container(
          padding: const EdgeInsets.only(right: 30, left: 30),
          decoration: const BoxDecoration(
            borderRadius: BorderRadius.only(
              topRight: Radius.circular(75),
            ),
            color: Color.fromARGB(255, 25, 61, 94),
          ),
        ),
      ),
      // 顶部白色区域（带左下圆角）
      Positioned(
        top: 0,
        left: 0,
        right: 0,
        bottom: 0.6 * (MediaQuery.of(context).size.height - 56 - safePadding),
        child: Container(
          padding: const EdgeInsets.only(bottom: 15),
          decoration: const BoxDecoration(
            borderRadius: BorderRadius.only(
              bottomLeft: Radius.circular(75),
            ),
            color: Colors.white,
          ),
        ),
      ),
    ],
  ),
),

额外优化建议 #

• 移除不必要的嵌套Container，比如外层的颜色容器可以合并到Decoration中，减少布局层级
• 优先使用Expanded、Flex等自适应布局组件，避免硬编码高度计算

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