Flutter中Row组件使用MainAxisAlignment.spaceBetween时，实现短数据下第二个Widget左对齐的需求

我完全懂你的需求——既要保留MainAxisAlignment.spaceBetween在数据过长时自动调整组件位置的特性，又要在数据较短时让第二个Widget和第一个左对齐，而不是卡在右侧。这个需求看似有点矛盾，但我们可以通过组合几个组件来完美实现：

核心思路 #

给第二个RichText套一个Align组件（设置左对齐），同时给第一个RichText加上Expanded，让它在文本过长时自动换行避免溢出。这样一来：

• 当第一个文本内容较短时，Expanded不会占据全部Row宽度，Align会拿到剩余空间，里面的RichText左对齐后就会紧跟在第一个组件右侧，实现你要的左对齐效果；
• 当第一个文本内容变长时，Expanded会占据尽可能多的空间，Align的可用宽度被压缩，第二个组件自然会向左移动，同时第一个文本会自动换行，完美保留spaceBetween带来的自适应特性。

修改后的代码 #

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    Expanded( // 给第一个RichText添加Expanded，支持文本过长自动换行
      child: RichText(
        text: TextSpan(
          style: TextStyle(
            fontSize: 14.0,
            color: Colors.black,
          ),
          children: <TextSpan>[
            TextSpan(
              text: 'ID : ',
              style: TextStyle(
                  fontSize: 11, fontFamily: 'PoppinsBold')),
            TextSpan(
              text: ' ${widget.patientDetails['mrn']}',
              style: TextStyle(
                  fontSize: 11, fontFamily: 'PoppinsRegular', color: textGreyColor)),
          ],
        ),
      ),
    ),
    Align( // 用Align包裹第二个RichText，强制其在自身空间内左对齐
      alignment: Alignment.centerLeft,
      child: RichText(
        text: TextSpan(
          style: TextStyle(
            fontSize: 14.0,
            color: Colors.black,
          ),
          children: <TextSpan>[
            TextSpan(
              text: 'Age : ',
              style: TextStyle(
                  fontSize: 11, fontFamily: 'PoppinsBold')),
            TextSpan(
              text: '${widget.patientDetails['age']}',
              style: TextStyle(
                  fontSize: 11, fontFamily: 'PoppinsRegular', color: textGreyColor)),
          ],
        ),
      ),
    )
  ])

为什么这样可行？ #

• Expanded确保第一个文本在过长时能自动换行，不会撑爆Row；
• Align让第二个文本在自己的可用空间内左对齐，而MainAxisAlignment.spaceBetween会把Expanded和Align分别放在Row的两端——但由于Align内的文本是左对齐，所以在第一个文本较短时，它会紧跟在第一个文本右侧，视觉上就是左对齐的效果；
• 当第一个文本变长，Expanded占据更多空间，Align的可用宽度缩小，第二个文本自然向左移动，完全符合你要的“数据长度增加时组件自动左移”的需求。

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