Flutter中如何消除Column内两个元素间的1px间隙？

针对你遇到的两个Container之间的1px间隙问题，这里提供几个可行的解决方案：

方案1：合并外层margin到统一容器 #

将两个Container的左右margin提取到外层的一个Container中，让内部Column的子元素直接紧密排列，避免两个独立容器的渲染偏差：

Container(
  margin: EdgeInsets.only(left: 24, right: 24),
  child: Column(
    children: [
      Container(
        padding: EdgeInsets.fromLTRB(16, 16, 0, 0),
        color: some_color,
      ),
      Expanded(
        child: Container(color: some_color),
      ),
    ],
  ),
)

这种方式从布局结构上消除了两个独立容器的边界计算误差，是最合理的解决思路。

方案2：强制像素对齐（应急hack） #

如果结构调整无法实现，可以利用设备像素比强制将第二个元素向上微调1物理像素：

Column(
  children: [
    Container(
      margin: EdgeInsets.only(left: 24, right: 24),
      padding: EdgeInsets.fromLTRB(16, 16, 0, 0),
      color: some_color,
    ),
    Transform.translate(
      offset: Offset(0, -1 / MediaQuery.of(context).devicePixelRatio),
      child: Expanded(
        child: Container(
          margin: EdgeInsets.only(left: 24, right: 24),
          color: some_color,
        ),
      ),
    ),
  ],
)

注意：这是应急方案，优先推荐方案1。

方案3：设置Column的crossAxisAlignment为stretch #

确保子元素宽度完全匹配，避免宽度计算偏差间接导致的上下缝隙：

Column(
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: [
    Container(
      margin: EdgeInsets.only(left: 24, right: 24),
      padding: EdgeInsets.fromLTRB(16, 16, 0, 0),
      color: some_color,
    ),
    Expanded(
      child: Container(
        margin: EdgeInsets.only(left: 24, right: 24),
        color: some_color,
      ),
    ),
  ],
)

这种方式可以消除因宽度不一致导致的像素缝隙，搭配方案1使用效果更好。

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