Flutter中如何使Row内一个子Widget高度匹配另一个子Widget？

要实现左侧蓝紫色时间线组件高度动态匹配右侧内容，同时解决图标周围多余间距的问题，你可以通过调整IntrinsicHeight和布局属性来实现，具体修改如下：

修改后的完整代码 #

IntrinsicHeight(
  child: Row(
    children: [
      // 左侧时间线组件
      Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Icon(
            Icons.fiber_manual_record,
            size: 18,
            color: Color(0xff11219E),
          ),
          Expanded(
            child: Container(
              width: 4,
              decoration: BoxDecoration(
                gradient: LinearGradient(
                  colors: [Color(0xff11219E), Color(0xff6F6AEB)],
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter,
                ),
              ),
            ),
          ),
          Icon(
            Icons.fiber_manual_record,
            size: 18,
            color: Color(0xff6F6AEB),
          ),
        ],
      ),
      // 右侧内容区域
      Expanded(
        child: Padding(
          padding: const EdgeInsets.only(left: 16), // 可选：优化左右间距
          child: Column(
            children: [
              pickup(data),
              dropoff(data),
            ],
          ),
        ),
      ),
    ],
  ),
)

关键修改点说明 #

1. IntrinsicHeight包裹Row：强制所有子Widget高度与Row中最高的子Widget（右侧内容列）保持一致，实现完美等高。
2. Column设置spaceBetween：让上下图标分别对齐顶部和底部，中间渐变容器自动填充剩余高度，无需手动加Padding调整位置。
3. Expanded包裹渐变容器：确保渐变条填满上下图标间的所有可用空间，适配右侧内容的任意高度变化。
4. 移除多余Padding：去掉图标周围不必要的Padding，若需要小间距，可给Icon添加Padding(padding: const EdgeInsets.symmetric(vertical: 2))微调。

替代方案：自定义绘制时间线 #

如果需要更灵活的样式（比如自定义图标形状、渐变角度），可以用CustomPaint实现：

class TimelinePainter extends CustomPainter {
  final Color startColor;
  final Color endColor;
  final double dotSize;

  TimelinePainter({
    required this.startColor,
    required this.endColor,
    this.dotSize = 18,
  });

  @override
  void paint(Canvas canvas, Size size) {
    // 绘制顶部圆点
    canvas.drawCircle(
      Offset(size.width / 2, dotSize / 2),
      dotSize / 2,
      Paint()..color = startColor,
    );

    // 绘制渐变竖线
    final lineRect = Rect.fromLTWH(
      size.width / 2 - 2,
      dotSize / 2,
      4,
      size.height - dotSize,
    );
    canvas.drawRect(
      lineRect,
      Paint()..shader = LinearGradient(
        colors: [startColor, endColor],
        begin: Alignment.topCenter,
        end: Alignment.bottomCenter,
      ).createShader(lineRect),
    );

    // 绘制底部圆点
    canvas.drawCircle(
      Offset(size.width / 2, size.height - dotSize / 2),
      dotSize / 2,
      Paint()..color = endColor,
    );
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}

// 使用方式
IntrinsicHeight(
  child: Row(
    children: [
      CustomPaint(
        size: Size(24, double.infinity),
        painter: TimelinePainter(
          startColor: Color(0xff11219E),
          endColor: Color(0xff6F6AEB),
        ),
      ),
      Expanded(
        child: Column(
          children: [pickup(data), dropoff(data)],
        ),
      ),
    ],
  ),
)

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