Flutter Align组件多行文本右对齐失效问题咨询

问题现象 #

使用Align组件并设置alignment: Alignment.topRight时，单行文本（如"Name:"）能正常实现右对齐，但文本内容换行成多行（如"Billing Address:"）时，每行文本会呈现左对齐状态，具体效果如下：

多行文本显示效果： #

Billing |
Address: | #

单行文本显示效果： #

Name: |

---

问题代码 #

SizedBox(
  width: 108,
  child: Align(
      alignment: Alignment.topRight,
      child: Padding(
        padding: const EdgeInsets.only(right: 16.0),
        child: Text('Billing Address:'),
      )),
);

原因分析 #

Align组件的作用是将其子组件（此处为Text）整体对齐到指定位置，但Text组件默认的文本对齐方式为TextAlign.start（即左对齐）。因此当文本换行时，Text组件本身被Align定位到右侧区域，但文本内部的每一行仍保持左对齐，最终出现视觉上的对齐异常。

解决方案 #

给Text组件添加textAlign: TextAlign.right属性，让文本内部的每一行都实现右对齐，结合Align的整体定位，即可达成多行文本靠右对齐的预期效果：

SizedBox(
  width: 108,
  child: Align(
      alignment: Alignment.topRight,
      child: Padding(
        padding: const EdgeInsets.only(right: 16.0),
        child: Text(
          'Billing Address:',
          textAlign: TextAlign.right, // 添加该行配置
        ),
      )),
);

修改后多行文本的显示效果会变为：

---

Billing |
 Address: |

---

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