Flutter如何在进度气泡Widget下方对齐文本且不干扰连接线布局

你遇到的错位问题根源是：气泡+标签的Column宽度会被过长的标签文本撑大，挤压同一行内的连接线、其他气泡组件，导致整体布局偏移。只要固定住每个气泡组件块的宽度和气泡本身宽度一致，就能彻底避免标签宽度干扰上层连接线布局。
具体修改逻辑：

• 给每个气泡对应的Column外层套一个SizedBox，固定宽度和气泡宽度相同（即MediaQuery.of(context).size.width / 10）
• 给Text组件添加居中对齐属性，同时配置长文本截断/换行规则，避免溢出
• 修正原代码中多余的逗号语法错误
  修改后的完整代码如下：

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Container(
      padding: EdgeInsets.symmetric(
        vertical: MediaQuery.of(context).size.height / 20,
      ),
      height: 1 + MediaQuery.of(context).size.height / 10,
      width: MediaQuery.of(context).size.width / 16,
    ),
    // 第一个气泡+标签块，固定宽度和气泡一致
    SizedBox(
      width: MediaQuery.of(context).size.width / 10,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Container(
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              border: Border.all(
                color: Colors.green,
                width: 1.5,
              ),
            ),
            height: MediaQuery.of(context).size.height / 10,
            width: MediaQuery.of(context).size.width / 10,
            child: Center(
              child: Icon(
                Icons.check,
                color: Colors.green,
                size: 30,
              ),
            ),
          ),
          Text(
            "Test label",
            textAlign: TextAlign.center,
            maxLines: 2,
            overflow: TextOverflow.ellipsis,
          ),
        ],
      ),
    ),
    Container(
      padding: EdgeInsets.symmetric(
        vertical: MediaQuery.of(context).size.height / 20,
      ),
      height: 1 + MediaQuery.of(context).size.height / 10,
      width: MediaQuery.of(context).size.width / 16,
      child: Container(
        color: Colors.grey,
      ),
    ),
    Container(
      padding: EdgeInsets.symmetric(
        vertical: MediaQuery.of(context).size.height / 20,
      ),
      height: 1 + MediaQuery.of(context).size.height / 10,
      width: 3 / 2 * MediaQuery.of(context).size.width / 8,
      child: Container(
        color: Colors.grey,
      ),
    ),
    // 第二个气泡+标签块，同样固定宽度
    SizedBox(
      width: MediaQuery.of(context).size.width / 10,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Container(
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              border: Border.all(
                color: Colors.grey,
                width: 1.5,
              ),
            ),
            height: MediaQuery.of(context).size.height / 10,
            width: MediaQuery.of(context).size.width / 10,
          ),
          Text(
            "Long test label",
            textAlign: TextAlign.center,
            maxLines: 2,
            overflow: TextOverflow.ellipsis,
          ),
        ],
      ),
    ),
    Container(
      padding: EdgeInsets.symmetric(
        vertical: MediaQuery.of(context).size.height / 20,
      ),
      height: 1 + MediaQuery.of(context).size.height / 10,
      width: MediaQuery.of(context).size.width / 8,
      child: Container(
        color: Colors.grey,
      ),
    ),
    Container(
      padding: EdgeInsets.symmetric(
        vertical: MediaQuery.of(context).size.height / 20,
      ),
      height: 1 + MediaQuery.of(context).size.height / 10,
      width: MediaQuery.of(context).size.width / 8,
      child: Container(
        color: Colors.grey,
      ),
    ),
    // 第三个气泡+标签块，固定宽度
    SizedBox(
      width: MediaQuery.of(context).size.width / 10,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Container(
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              border: Border.all(
                color: Colors.grey,
                width: 1.5,
              ),
            ),
            height: MediaQuery.of(context).size.height / 10,
            width: MediaQuery.of(context).size.width / 10,
          ),
          Text(
            "Third label",
            textAlign: TextAlign.center,
            maxLines: 2,
            overflow: TextOverflow.ellipsis,
          ),
        ],
      ),
    )
  ],
),

如果需要标签完全显示不截断，把maxLines和overflow属性去掉即可，文本会自动换行，宽度仍然被限制在气泡宽度以内，不会干扰连接线布局。

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