Flutter：获取Widget相对高度以适配VerticalDivider

问题描述 #

我正在构建一个仿推文样式的页面，尝试实现头像上下的竖线效果，使用了如下代码：

Expanded(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                VerticalDivider(
                  color: Colors.red,
                  thickness: 10,
                  width: 20,
                ),
                //make a widget that looks like twitter composing tweet
                CircleAvatar(
                  radius: 20,
                  backgroundImage: NetworkImage(user.imageUrls[0]),
                ),
                //add a gray line that runs down the middle of the screen
                VerticalDivider(
                  color: Colors.red,
                  thickness: 10,
                  width: 200,
                ),
              ],
            ),
          ),

但VerticalDivider默认不可见，为其指定高度后虽能显示，却超出了组件原有尺寸。请问是否可以将父组件的尺寸传递给VerticalDivider，使其适配可用空间？

解决方案 #

VerticalDivider是为Row布局设计的分割组件，在Column中使用会因布局约束问题导致显示异常，不适合实现这种上下延伸的竖线。推荐两种更可靠的实现方式：

方式一：通过LayoutBuilder适配父容器尺寸 #

用LayoutBuilder获取父容器的可用空间，计算竖线高度后用Container绘制：

Expanded(
  child: LayoutBuilder(
    builder: (context, constraints) {
      // 计算竖线总可用高度：父容器高度减去头像直径（2*radius）
      final totalLineHeight = constraints.maxHeight - 40;
      return Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          // 上方竖线
          Container(
            width: 10,
            height: totalLineHeight / 2,
            color: Colors.red,
          ),
          CircleAvatar(
            radius: 20,
            backgroundImage: NetworkImage(user.imageUrls[0]),
          ),
          // 下方竖线
          Container(
            width: 10,
            height: totalLineHeight / 2,
            color: Colors.red,
          ),
        ],
      );
    },
  ),
)

方式二：用Stack实现贯穿式竖线（更简洁） #

如果需要竖线贯穿整个父容器，头像居中覆盖在竖线上，Stack布局更直观：

Expanded(
  child: Stack(
    alignment: Alignment.center,
    children: [
      // 竖线铺满父容器高度
      Container(
        width: 10,
        color: Colors.red,
      ),
      // 头像覆盖竖线，可加背景色区分
      CircleAvatar(
        radius: 20,
        backgroundImage: NetworkImage(user.imageUrls[0]),
        backgroundColor: Colors.white,
      ),
    ],
  ),
)

补充说明 #

VerticalDivider的内部实现依赖Row的布局约束，它的高度默认由父Row的高度决定，但在Column中，它的高度约束是无限制的（unbounded），必须手动指定height，这就容易导致超出父容器尺寸。上述两种方式直接基于父容器约束绘制，能完美适配可用空间。

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