Flutter Row中Expanded文本换行时，左侧文本垂直居中如何改为顶部对齐？

问题原因 #

Flutter 中 Row 组件默认的垂直方向（交叉轴）对齐规则为 CrossAxisAlignment.center，当右侧被 Expanded 包裹的文本变为多行时，Row 的整体高度会被撑开，左侧未换行的文本就会自动沿垂直方向居中，出现你遇到的位置偏移问题。

解决方案 #

方案1：设置顶部对齐（符合你的期望效果） #

直接给 Row 添加 crossAxisAlignment: CrossAxisAlignment.start 属性，即可让所有子组件沿 Row 的顶部对齐，不管右侧文本多少行，左侧文本位置都不会下移：

Row(
  // 新增这行配置交叉轴对齐方式为顶部对齐
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Text("text1"),
    Expanded(
      child:Text("text222222222222222222222222222222222222222222222222")
    ),
  ],
)

方案2：基线对齐（适合字号不同的场景） #

如果两个文本字号不一致，希望两个文本的第一行文字基线保持对齐（避免顶部对齐时文字出现视觉高低差），可以用基线对齐配置：

Row(
  crossAxisAlignment: CrossAxisAlignment.baseline,
  // 用baseline对齐时必须搭配指定文字基准线
  textBaseline: TextBaseline.alphabetic,
  children: [
    Text("text1", style: TextStyle(fontSize: 18)),
    Expanded(
      child:Text("text222222222222222222222222222222222222222222222222", style: TextStyle(fontSize: 14))
    ),
  ],
)

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