Flutter中VerticalDivider不显示：无需指定高度的解决方案

问题分析 #

你遇到的核心问题是：Row组件中VerticalDivider无法获取到动态高度（由内部Column的文本内容决定），因为Row的mainAxisSize: MainAxisSize.min会让它的高度由子节点中最高的元素决定，但VerticalDivider本身没有固有高度，无法自动匹配Column的高度。而IntrinsicHeight会带来额外性能开销，因此需要更轻量的实现方式。

解决方案：用Stack替代Row实现动态高度分隔线 #

利用Stack的特性，让分隔线自动匹配Column的动态高度，无需指定固定高度或依赖IntrinsicHeight。具体实现如下：

ColoredBox(
  color: Colors.grey,
  child: Stack(
    alignment: Alignment.centerLeft,
    children: [
      // 原有内容Column，保持动态高度
      const Flexible(
        child: ColoredBox(
          color: Colors.green,
          child: Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              Text('Title', maxLines: 2),
              Text('Description', maxLines: 2),
              Text('Made by', maxLines: 2),
            ],
          ),
        ),
      ),
      // 自定义分隔线，自动匹配Stack高度（即Column的高度）
      Container(
        width: 4,
        color: Get.theme.colorScheme.primary,
      ),
    ],
  ),
)

原理说明 #

• Stack的高度由内部最高的子节点（即Column）决定，因为Column设置了mainAxisSize: MainAxisSize.min，高度完全由文本内容动态生成。
• 作为分隔线的Container未指定高度，默认会填充Stack的垂直空间，自然匹配Column的动态高度。
• alignment: Alignment.centerLeft确保分隔线固定在左侧，和原布局一致。

另一种轻量方案：用Row配合CrossAxisAlignment.stretch（需父级约束） #

如果坚持使用Row，可以给Row添加一个限制高度的父级（比如Wrap），同时将VerticalDivider替换为Container，并设置crossAxisAlignment: CrossAxisAlignment.stretch：

ColoredBox(
  color: Colors.grey,
  child: Wrap(
    children: [
      Row(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        mainAxisSize: MainAxisSize.min,
        children: [
          Container(
            width: 4,
            color: Get.theme.colorScheme.primary,
          ),
          const Flexible(
            child: ColoredBox(
              color: Colors.green,
              child: Column(
                mainAxisSize: MainAxisSize.min,
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: [
                  Text('Title', maxLines: 2),
                  Text('Description', maxLines: 2),
                  Text('Made by', maxLines: 2),
                ],
              ),
            ),
          )
        ],
      ),
    ],
  ),
)

注意事项 #

• 第一种Stack方案性能最优，无需额外布局计算，适合大多数场景。
• 第二种Wrap方案利用Wrap的特性限制Row的高度由内容决定，避免Row无限扩展，同时CrossAxisAlignment.stretch让分隔线占满Row的高度。

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