Flutter中如何让文本精准显示在标题下方并全局左对齐？

问题描述 #

我希望在所有设备中让文本精准显示在标题下方并完全左对齐，效果应为：
Welcome to Services
User-1 Login
二者需严格上下排列。我已尝试设置textAlign为left并使用Column组件，但没有效果，请问有解决方案吗？

代码如下：

return SafeArea(
  child: Scaffold(
    body: SingleChildScrollView(
      child: Container(
        padding: const EdgeInsets.all(30.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Image.asset(
              rAdvisor,
              height: heightOfDevice * 0.3,
            ),
            Column(
              children: [
                Text(
                  'Welcome to Services',
                  textAlign: TextAlign.left,
                  style: GoogleFonts.poppins(
                      fontSize: 25,
                      fontWeight: FontWeight.bold,
                      color: rNavyGrey),
                ),
                Text(
                  'User-1 Login',
                  textAlign: TextAlign.left,
                  style: GoogleFonts.poppins(
                    color: rNavyGrey,
                    fontSize: 20,
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    ),
  ),
);

解决方法 #

问题核心是嵌套的Column组件默认水平居中对齐，且Text的textAlign: TextAlign.left仅在文本宽度小于容器宽度时生效，而嵌套Column的宽度默认是子组件的最大宽度，所以无法实现左对齐。以下两种方法可以解决：

方式一：给嵌套Column设置crossAxisAlignment: CrossAxisAlignment.start #

让嵌套Column内的子组件沿水平方向左对齐：

Column(
  crossAxisAlignment: CrossAxisAlignment.start, // 添加此行
  children: [
    Text(
      'Welcome to Services',
      style: GoogleFonts.poppins(
          fontSize: 25,
          fontWeight: FontWeight.bold,
          color: rNavyGrey),
    ),
    Text(
      'User-1 Login',
      style: GoogleFonts.poppins(
        color: rNavyGrey,
        fontSize: 20,
      ),
    ),
  ],
),

方式二：给外层Column设置crossAxisAlignment: CrossAxisAlignment.start #

如果希望整个页面内容都左对齐，直接给最外层Column添加该属性即可：

Column(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  crossAxisAlignment: CrossAxisAlignment.start, // 添加此行
  children: [
    // 图片和嵌套Column代码
  ],
),

补充说明 #

• 设置crossAxisAlignment: CrossAxisAlignment.start后，Text的textAlign属性可以省略，因为子组件已经强制左对齐。
• 若需文本在容器内强制左对齐（比如文本宽度超过容器时），可以给Text包裹一个占满父容器宽度的Container，并设置alignment: Alignment.centerLeft。

内容的提问来源于stack exchange，提问作者Kushal Hemanth Y