Flutter中Card内分隔线（SizedBox/Divider）不显示问题求助

云上老周

2026-6-13

问题原因分析

你的分隔线无法显示的核心原因是分隔线Container未设置宽度，默认宽度为0，所以即使设置了高度和颜色也无法被看到。另外，你用SizedBox嵌套Center再放Container的写法冗余，反而容易限制子元素的尺寸表现。

解决方案

提供三种可行的修复方式，按需选择：

方式一：给Container设置宽度

直接给分隔线Container设置宽度为double.infinity，让它占满Card的可用宽度：

// 替换原分隔线代码
Container(
  height: 5.0,
  width: double.infinity, // 关键：占满可用宽度
  margin: const EdgeInsets.symmetric(horizontal: 1.0),
  color: Colors.red,
),

方式二：使用Divider组件（更简洁）

Flutter内置的Divider组件专门用于分隔线场景，无需手动设置宽度，直接配置参数即可：

// 替换原分隔线代码
const Divider(
  color: Colors.red,
  thickness: 5.0, // 对应原Container的height
  indent: 1.0, // 对应左边margin
  endIndent: 1.0, // 对应右边margin
),

方式三：调整Column的交叉轴对齐方式

将Column的crossAxisAlignment设为CrossAxisAlignment.stretch，让所有子元素自动占满Card的宽度，此时分隔线Container无需单独设置宽度：

Column(
  crossAxisAlignment: CrossAxisAlignment.stretch, // 关键设置
  children: [
    Row(
      children: [
        IconButton(icon: const Icon(Icons.delete), onPressed: () {}),
        IconButton(icon: const Icon(Icons.check), onPressed: () {}),
      ],
    ),
    // 分隔线Container
    Container(
      height: 5.0,
      margin: const EdgeInsets.symmetric(horizontal: 1.0),
      color: Colors.red,
    ),
    const SizedBox(height: 100, width: 200),
  ],
)

额外优化建议