Flutter Web列表项间横线在Firefox浏览器中不显示问题求助

问题根源 #

Firefox和Chrome等浏览器的亚像素渲染逻辑存在差异，当使用0.7这种非整数高度的Container做分隔线时，部分场景下Firefox无法正确渲染出这条线。

实用解决办法 #

方法1：改用整数高度 #

把高度设为1，视觉上仅略粗一点，但能保证所有浏览器稳定显示：

Container(
  width: double.infinity,
  height: 1,
  color: Color(0xffEBEBEB)                       
)

方法2：用Border实现分隔线 #

通过BoxDecoration的border属性定义分隔线，这种方式的渲染兼容性更可靠：

Container(
  width: double.infinity,
  decoration: BoxDecoration(
    border: Border(
      bottom: BorderSide(
        color: Color(0xffEBEBEB),
        width: 0.7,
      ),
    ),
  ),
)

方法3：使用Flutter官方Divider组件 #

Divider是Flutter专为列表项分隔设计的组件，跨平台（含Web）兼容性最优：

Divider(
  color: Color(0xffEBEBEB),
  thickness: 0.7,
  height: 0, // 按需调整上下间距，设为0则无额外空白
)

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