Flutter中Vertical Divider不显示问题求助

VerticalDivider不显示的核心原因是它缺少足够的垂直高度约束——当前Row的高度由内部两个Column的内容决定，VerticalDivider默认需要父容器提供明确的垂直空间才能渲染。

下面提供两种简单直接的解决方法：

方法一：给VerticalDivider指定高度 #

直接为VerticalDivider添加height属性，明确它的高度，匹配左右Column的高度即可：

// divider
Padding(
  padding: EdgeInsets.all(10),
  child: VerticalDivider(
    color: Colors.black,
    thickness: 1,
    width: 20,
    indent: 5,
    endIndent: 5,
    height: 40, // 新增：指定分隔线高度
  ),
),

方法二：用Container替代VerticalDivider（新手友好） #

如果觉得VerticalDivider的约束不好理解，直接用Container实现垂直分隔线，尺寸控制更直观：

// divider
Padding(
  padding: EdgeInsets.symmetric(vertical: 10),
  child: Container(
    width: 1,
    height: 40,
    color: Colors.black,
  ),
),

额外优化建议 #

你也可以调整Row的布局规则，让所有子组件自动填充垂直空间：给Row添加crossAxisAlignment: CrossAxisAlignment.stretch，同时把左右Column的mainAxisAlignment: MainAxisAlignment.spaceEvenly换成mainAxisAlignment: MainAxisAlignment.center，这样VerticalDivider会自动填充Row的高度，不需要手动指定height。

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