Flutter中Row设置MainAxisAlignment.spaceBetween导致列表组件不对齐问题

问题根因 #

MainAxisAlignment.spaceBetween的布局逻辑是根据Row内子元素的实际总宽度，把剩余的空白间隙均匀分配到子元素之间。只要某一行的礼拜名称文本长度变化，三个子元素之间的间隙宽度就会跟着调整，直接导致中间时间、右侧图标在不同行的横向位置偏移，没法形成固定的垂直列对齐。
要实现三列固定垂直对齐，核心是不让子元素的实际内容宽度决定列的边界，给每一列设置固定的宽度约束即可，下面两种调整方式可根据实际需求选择： #

方案1：适配当前场景的弹性约束调整 #

把左侧名称文本用Expanded包裹，让它自动占满Row内除了中间时间、右侧图标之外的所有横向空间，这样不管名称文字多长，这一块的右边界都是固定值，中间时间的位置自然就能和所有行保持垂直对齐。
修改后的核心代码如下：

itemBuilder: (context, index) => Padding(
  padding: const EdgeInsets.all(8.0),
  child: Row(
    children: [
      // 左侧名称区：自动占满剩余横向空间，右边界固定
      Expanded(
        child: Text(
          prayerTimes[index].name,
          style: const TextStyle(
            color: Colors.teal,
            fontWeight: FontWeight.bold,
            fontSize: 18.0,
          ),
          // 长文本溢出时自动截断，避免撑破布局
          overflow: TextOverflow.ellipsis,
        ),
      ),
      // 中间时间：位置固定在左侧弹性区的右侧
      Text(
        prayerTimes[index].time,
        style: const TextStyle(color: Colors.teal, fontSize: 18.0),
      ),
      // 时间和图标之间加固定宽度的间距
      const SizedBox(width: 16),
      // 右侧图标：位置固定
      Icon(
        Icons.volume_up,
        color: Colors.teal,
      )
    ],
  ),
),

• 效果说明：所有行的时间文本横向位置完全一致，右侧图标和时间的间距固定，不会因为某一行名称文本过长导致整体布局偏移。
• 额外提示：原来代码里套在Row外面的Center组件可以去掉，这个组件会让Row的宽度只适配内部子元素的总宽度，反而会打乱整体的对齐逻辑。

方案2：固定列占比的规整对齐方案 #

如果想要更统一的三列布局，比如左侧名称列占60%宽度、中间时间列占20%宽度、右侧图标列占20%宽度，可以给三个子元素分别用Expanded包裹，通过flex值固定每一列的宽度占比：

itemBuilder: (context, index) => Padding(
  padding: const EdgeInsets.all(8.0),
  child: Row(
    children: [
      // 左侧名称列：占6份弹性空间，内容左对齐
      Expanded(
        flex: 6,
        child: Text(
          prayerTimes[index].name,
          style: const TextStyle(
            color: Colors.teal,
            fontWeight: FontWeight.bold,
            fontSize: 18.0,
          ),
        ),
      ),
      // 中间时间列：占2份弹性空间，内容居中对齐
      Expanded(
        flex: 2,
        child: Text(
          prayerTimes[index].time,
          textAlign: TextAlign.center,
          style: const TextStyle(color: Colors.teal, fontSize: 18.0),
        ),
      ),
      // 右侧图标列：占2份弹性空间，内容居中对齐
      Expanded(
        flex: 2,
        child: Icon(
          Icons.volume_up,
          color: Colors.teal,
        ),
      )
    ],
  ),
),

• 效果说明：三列的宽度比例完全固定，不管列内的内容长度是多少，列的边界都不会变化，对齐效果更规整。

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