Flutter中如何避免线条与文本重叠？实现触达圆形的流程指示器

文本与我的线条重叠了。
我该如何解决这个问题？

我需要我的线条触达圆形。它位于LimitedBox中，将作为流程指示器使用

原代码 #

Column(
  children: [
    Container(
      width: 40.0,
      height: 40.0,
      alignment: Alignment.center,
      decoration: BoxDecoration(
        color: const Color(0xffEFF2FA),
        shape: BoxShape.circle,
        border: Border.all(
          width: 1,
          color: const Color(0xff1F46A0),
        ),
      ),
      child: const Text(
        '1',
        style: TextStyle(
          color: Color(0xff000000),
          fontFamily: 'Inter',
        ),
      ),
    ),
    const SizedBox(
      height: 4,
    ),
    const Text(
      'Basic infos',
      style: TextStyle(
        color: Color(0xff000000),
        fontFamily: 'Inter',
        fontSize: 11,
      ),
    ),
  ],
),
Padding(
  padding: const EdgeInsets.only(bottom: 15.0),
  child: Container(
    height: 1,
    width: 50.0,
    color: const Color(0xff3D3D3D),
  ),
)

当前效果 #

期望效果 #

解决方案 #

问题出在布局对齐和层级上：原线条与文本处于同一垂直区域导致重叠，且未对齐到圆形边缘。可以通过以下两种方式修复：

方法1：调整Row的对齐方式（适用于水平流程）

如果整体是水平排列的流程项，将线条与圆形的中心对齐，避免和下方文本重叠，同时调整padding让线条触达圆形：

Row(
  crossAxisAlignment: CrossAxisAlignment.center, // 让子元素垂直居中
  children: [
    Column(
      children: [
        Container(
          width: 40.0,
          height: 40.0,
          alignment: Alignment.center,
          decoration: BoxDecoration(
            color: const Color(0xffEFF2FA),
            shape: BoxShape.circle,
            border: Border.all(
              width: 1,
              color: const Color(0xff1F46A0),
            ),
          ),
          child: const Text(
            '1',
            style: TextStyle(
              color: Color(0xff000000),
              fontFamily: 'Inter',
            ),
          ),
        ),
        const SizedBox(height: 4),
        const Text(
          'Basic infos',
          style: TextStyle(
            color: Color(0xff000000),
            fontFamily: 'Inter',
            fontSize: 11,
          ),
        ),
      ],
    ),
    // 调整线条位置，与圆形中心对齐，并触达圆形边缘
    Padding(
      padding: const EdgeInsets.only(left: -20.0), // 圆形半径20，左移20让线条触达边缘
      child: Container(
        height: 1,
        width: 70.0, // 原长度50 + 左移的20，保证总长度不变
        color: const Color(0xff3D3D3D),
      ),
    ),
    // 后续步骤项...
  ],
)

方法2：用Stack整合线条与步骤项（更灵活）

将线条放在Stack底层，让它从圆形右侧开始延伸，上层放置圆形和文本，完全避免重叠：

Widget buildStepItem(String stepText, bool showLine) {
  return Stack(
    alignment: Alignment.center,
    children: [
      // 线条：从圆形右侧开始，延伸50像素
      if (showLine)
        Positioned(
          left: 20, // 圆形半径20，对应右侧边缘位置
          right: -50, // 线条长度50
          child: Container(height: 1, color: const Color(0xff3D3D3D)),
        ),
      // 步骤内容：圆形+文本
      Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Container(
            width: 40.0,
            height: 40.0,
            alignment: Alignment.center,
            decoration: BoxDecoration(
              color: const Color(0xffEFF2FA),
              shape: BoxShape.circle,
              border: Border.all(
                width: 1,
                color: const Color(0xff1F46A0),
              ),
            ),
            child: const Text(
              '1',
              style: TextStyle(
                color: Color(0xff000000),
                fontFamily: 'Inter',
              ),
            ),
          ),
          const SizedBox(height: 4),
          Text(
            stepText,
            style: const TextStyle(
              color: Color(0xff000000),
              fontFamily: 'Inter',
              fontSize: 11,
            ),
          ),
        ],
      ),
    ],
  );
}

// 使用示例
Row(
  children: [
    buildStepItem('Basic infos', true),
    buildStepItem('Next step', false), // 最后一个步骤不显示线条
  ],
)

这两种方法都能实现线条触达圆形、文本与线条不重叠的效果，根据你的整体布局选择即可。

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