Flutter中Row嵌套Column布局冲突问题求助

你的布局问题核心在于Row的垂直对齐逻辑和分割线的布局控制，以下是修复方案和代码说明：

关键问题点 #

1. 原Row使用CrossAxisAlignment.start，导致所有子组件顶部对齐，分割线无法和步骤圆形的中线对齐
2. Divider的height属性控制的是组件整体高度，而非分割线的垂直位置，用来做中间连接线不够灵活
3. StepWithPlaceHolder的Column未限制主轴尺寸，易造成不必要的空间占用

修复后的完整代码 #

import 'package:flutter/material.dart';

class StepProgressBar extends StatelessWidget {
  const StepProgressBar({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Row(
      // 改为垂直居中对齐，让分割线和圆形中线对齐
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        const StepWithPlaceHolder(label: "1", title: "Choose File"),
        // 用Container替代Divider，更灵活控制连接线样式
        Expanded(
          child: Container(
            height: 7,
            color: Colors.grey.shade300,
          ),
        ),
        const StepWithPlaceHolder(label: "2", title: "Finish")
      ],
    );
  }
}

class StepWithPlaceHolder extends StatelessWidget {
  final String label;
  final String title;

  const StepWithPlaceHolder({
    Key? key,
    required this.label,
    required this.title,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      // 限制Column仅包裹自身内容，避免多余空间占用
      mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Container(
          width: 55,
          height: 55,
          decoration: const BoxDecoration(
            shape: BoxShape.circle,
            color: Colors.red,
          ),
          child: Center(
            child: Text(
              label,
              style: const TextStyle(
                fontWeight: FontWeight.bold,
                fontSize: 22,
                color: Colors.white,
              ),
            ),
          ),
        ),
        const SizedBox(height: 8), // 增加圆形和标题的间距，优化视觉效果
        Text(
          title,
          style: const TextStyle(
            fontWeight: FontWeight.w800,
            fontSize: 20,
            color: Colors.black,
          ),
        ),
      ],
    );
  }
}

修改说明 #

• 调整Row的crossAxisAlignment为CrossAxisAlignment.center，确保分割线与步骤圆形的垂直中线对齐
• 用Container替换Divider：直接设置高度和背景色，避免Divider的height属性引发的布局混乱
• 给StepWithPlaceHolder的Column添加mainAxisSize: MainAxisSize.min，让Column仅占用自身内容所需高度
• 增加SizedBox(height:8)，给圆形和标题之间添加合理间距，提升整体美观度

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