Flutter进度条布局问题求助：行列布局卡顿且无法实现圆形样式

问题分析 #

当前代码把每个步骤的圆形图标和右侧横线封装在独立的Column中，导致横线无法在相邻圆形之间均匀填充，整体布局的间距和对齐方式不符合预期。

修复代码 #

@override
Widget build(BuildContext context) {
  return Padding(
    padding: const EdgeInsets.all(20.0),
    child: Column(
      children: [
        // 进度条（圆形+连接线）
        Row(
          children: [
            for (int i = 0; i < steps.length; i++)
              Expanded(
                child: Row(
                  children: [
                    CircleAvatar(
                      radius: 20,
                      backgroundColor: Colors.green,
                    ),
                    // 最后一个圆形后无需连接线
                    if (i != steps.length - 1)
                      Expanded(
                        child: Container(
                          height: 2, // 调整横线高度至视觉舒适值
                          color: Colors.green,
                        ),
                      ),
                  ],
                ),
              ),
          ],
        ),
        const SizedBox(height: 12), // 进度条与文字的间距
        // 步骤文字行
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: steps.map((step) {
            return SizedBox(
              width: 40, // 与圆形直径一致，保证文字和圆形精准对齐
              child: Text(
                step,
                textAlign: TextAlign.center,
                style: const TextStyle(
                  fontSize: 12,
                  fontWeight: FontWeight.bold,
                ),
              ),
            );
          }).toList(),
        ),
      ],
    ),
  );
}

关键调整点 #

• 将进度条（圆形+连接线）和步骤文字拆分为两个独立Row，包裹在父Column中，布局层次更清晰
• 用Expanded让圆形间的横线自动填充剩余空间，实现均匀的连接线效果
• 文字行通过MainAxisAlignment.spaceBetween和固定宽度SizedBox，保证每个文字与上方圆形精准对齐
• 调整横线高度为2，贴合常见进度条的视觉样式

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