Flutter如何在Column()内将一个元素或Text()置于另一元素的右上方

快速修复你的现有代码 #

你只需要给包裹 Age 文本的 Container 增加宽度约束，撑满 Column 的可用宽度，textAlign 就能正常生效：

ListView(
  children: [
    Column(
      children: [
        Container(
          margin: EdgeInsets.all(18),
          // 新增这行，让Container撑满父级宽度
          width: double.infinity,
          child: Text(
            "Age : ",
            textAlign: TextAlign.right,
          ),
        ),
        Container(
          child: Text(
            "29",
            textAlign: TextAlign.center,
            style: TextStyle(fontSize: 32),
          ),
        ),
      ],
    ),
  ],
)

原理说明 #

textAlign 属性仅在 Text 组件自身宽度大于文本内容宽度时才会生效：

• 你直接在 ListView 中使用 Text 时，Text 默认会撑满 ListView 的父级最大宽度，所以右对齐生效
• 放在 Column 子节点中时，Column 默认让所有子组件收缩到自身内容宽度，Text 宽度和文字宽度完全一致，textAlign 自然不会生效

更贴合效果图的实现方案 #

如果你要实现 Age 标签紧贴在数字 29 的右上角（而不是整行靠右），推荐用 Stack 叠放布局，效果更精准：

ListView(
  children: [
    Stack(
      fit: StackFit.loose,
      children: [
        // 底层放数字，预留右上角的标签空间
        Padding(
          padding: const EdgeInsets.only(top: 10, right: 24),
          child: Text(
            "29",
            style: TextStyle(fontSize: 36, fontWeight: FontWeight.bold),
          ),
        ),
        // 上层定位Age标签到右上角
        Positioned(
          top: 0,
          right: 0,
          child: Text(
            "Age : ",
            style: TextStyle(fontSize: 14, color: Colors.grey),
          ),
        ),
      ],
    )
  ],
)

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