Flutter中Row内多个Container出现间距和颜色不一致是否正常？

核心问题回复 #

• Container本身没有自带默认的固定外边距，你代码中也显式设置了margin: EdgeInsets.all(0)，因此缝隙并非Container本身属性导致。
• 你遇到的显示异常属于Flutter跨平台渲染的正常表现，根源为逻辑像素与设备物理像素的对齐误差，可以通过调整代码彻底修复。

现象产生原因 #

你设置每个Container的宽度为1逻辑像素，但设备实际显示的物理像素和逻辑像素存在倍率关系（常见倍率有1.5x、2x、3x等），当Container总宽度或单个宽度无法被物理像素倍率整除时，绘制过程中会出现亚像素渲染的边界过渡效果，视觉上就会呈现出深浅不一、存在间隙的表现。你生成了411个宽度为1逻辑像素的Container，总宽度411逻辑像素无法适配当前设备的物理像素整数对齐要求，就会触发该问题。

修复代码方案 #

你可以根据业务需求选择任意一种方案解决：

方案1（最优，性能最高） #

如果只是要实现纯色矩形区域，直接使用ColoredBox替代Row+多个Container的实现，完全规避像素对齐问题，同时大幅减少不必要的组件渲染：

ColoredBox(
  color: Colors.red,
  child: SizedBox(
    width: 411,
    height: 100,
  ),
)

方案2（适配多设备像素密度） #

如果确实需要拆分多个独立色块，根据设备像素比计算单个色块的宽度，保证对齐物理像素：

import 'dart:ui' as ui;

// 构建Widget时获取设备像素比
final devicePixelRatio = ui.PlatformDispatcher.instance.implicitView!.devicePixelRatio;
// 单个色块宽度为1物理像素
final singleBlockWidth = 1 / devicePixelRatio;

// 替换原有Row的Container宽度
Row(
  mainAxisAlignment: MainAxisAlignment.start,
  mainAxisSize: MainAxisSize.min,
  children: [
    for (int i = 0; i < 411; ++i)
      Container(
        margin: EdgeInsets.all(0),
        width: singleBlockWidth,
        padding: EdgeInsets.all(0),
        height: 100,
        color: Colors.red,
      ),
  ],
)

方案3（快速兼容） #

给外层Row套一层偏移为0.5逻辑像素的Transform，强制对齐像素边界：

Transform.translate(
  offset: const Offset(0.5, 0),
  child: Row(
    mainAxisAlignment: MainAxisAlignment.start,
    mainAxisSize: MainAxisSize.min,
    children: [
      for (int i = 0; i < 411; ++i)
        Container(
          margin: EdgeInsets.all(0),
          width: 1,
          padding: EdgeInsets.all(0),
          height: 100,
          color: Colors.red,
        ),
    ],
  ),
)

问题原运行效果参考 #

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