Flutter中VerticalDivider在模拟器不显示的问题求助

核心原因 #

1. 自定义Container分割线不可见：Row是水平布局，垂直方向默认无约束，你写的Container只设置了width未添加height，导致高度被压缩为0，自然无法显示。
2. VerticalDivider不可见：你的Row没有明确高度约束，若父组件高度未固定，Row高度仅由图片撑开，再加上indent:20的顶部留白设置，分割线的有效显示高度被压缩得过小；同时MainAxisAlignment.spaceEvenly会分散水平空间，进一步挤压了分割线的显示区域。

解决方案 #

方案1：固定Row高度+手动设置分割线尺寸

给Row套一个固定高度的容器，同时给Container分割线添加height，调整VerticalDivider的留白参数：

SizedBox(
  height: 50, // 和图片高度保持一致
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    children: [
      const SizedBox(width: 10),
      GestureDetector(
        onTap: () {
          // Handle Google login
        },
        child: Image.asset(
          'assets/images/google.png',
          width: 50,
          height: 50,
        ),
      ),
      const VerticalDivider(
        color: Colors.grey,
        width: 20,
        thickness: 1,
        indent: 10, // 调整留白让分割线居中
        endIndent: 10,
      ),
      Container(
        margin: const EdgeInsets.symmetric(vertical: 10),
        color: Colors.grey.withOpacity(0.4),
        width: 3,
        height: 30, // 50-20(上下margin)=30，匹配留白后的高度
      ),
      GestureDetector(
        onTap: () {
          // Handle Facebook login
        },
        child: Image.asset(
          'assets/images/facebook.png',
          width: 50,
          height: 50,
        ),
      ),
      const SizedBox(width: 10),
    ],
  ),
)

方案2：用IntrinsicHeight自适应高度

使用IntrinsicHeight包裹Row，让Row高度自动匹配子元素中最高的那个（此处为图片的50），分割线会自动填充垂直空间，无需手动设置高度：

IntrinsicHeight(
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    children: [
      const SizedBox(width: 10),
      GestureDetector(
        onTap: () {
          // Handle Google login
        },
        child: Image.asset(
          'assets/images/google.png',
          width: 50,
          height: 50,
        ),
      ),
      const VerticalDivider(
        color: Colors.grey,
        width: 20,
        thickness: 1,
      ),
      Container(
        color: Colors.grey.withOpacity(0.4),
        width: 3,
      ),
      GestureDetector(
        onTap: () {
          // Handle Facebook login
        },
        child: Image.asset(
          'assets/images/facebook.png',
          width: 50,
          height: 50,
        ),
      ),
      const SizedBox(width: 10),
    ],
  ),
)

关键说明 #

• IntrinsicHeight会计算子元素的最大高度，适合需要让多个子元素高度统一的场景，仅在简单布局中会有可忽略的性能开销。
• VerticalDivider的width是指分割线占据的总水平空间（左右留白+厚度），thickness才是分割线本身的宽度。

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