Flutter中如何让Row内的Text与TextFormField底部对齐？

解决方法 #

你只需要修改Row组件的交叉轴对齐属性即可，不需要额外嵌套Align组件，有两种常用方案可选： #

方案1：底部对齐（适配你要对齐到Row底部的需求）

Row默认交叉轴对齐方式为顶部对齐，新增crossAxisAlignment: CrossAxisAlignment.end属性即可让所有子元素对齐到Row底部，同时可以给右侧文本加一点边距调整位置更协调：

return Row(
  // 新增交叉轴对齐配置
  crossAxisAlignment: CrossAxisAlignment.end,
  children: [
    Flexible(
      child: TextFormField(
        decoration: InputDecoration(labelText: label),
        keyboardType: _getKeyboardType(),
        validator: (value) => _getFormValidator()(value),
        onSaved: (value) { saveAction(formItem,value); },
        onTap: () {print(TextInputType.emailAddress);},
      ),
    ),
    // 加内边距避免文本和输入框贴太近，bottom数值可根据实际显示效果调整
    Padding(
      padding: const EdgeInsets.only(left: 8, bottom: 12),
      child: Text('Kilos',style: TextStyle(backgroundColor: Colors.red),)
    )
  ],
);

方案2：文本基线对齐（和输入框内的输入文字严格水平对齐）

如果你需要让“Kilos”文本和输入框内的用户输入文字完全在同一水平线上，可以用基线对齐方案：

return Row(
  crossAxisAlignment: CrossAxisAlignment.baseline,
  // 基线对齐必须搭配textBaseline属性才能生效
  textBaseline: TextBaseline.alphabetic,
  children: [
    Flexible(
      child: TextFormField(
        decoration: InputDecoration(labelText: label),
        keyboardType: _getKeyboardType(),
        validator: (value) => _getFormValidator()(value),
        onSaved: (value) { saveAction(formItem,value); },
        onTap: () {print(TextInputType.emailAddress);},
      ),
    ),
    Padding(
      padding: const EdgeInsets.only(left: 8),
      child: Text('Kilos',style: TextStyle(backgroundColor: Colors.red),)
    )
  ],
);

原理解释 #

你之前用Align包裹没生效的原因是Align需要父组件明确的约束范围才能正常工作，直接通过Row本身提供的交叉轴对齐属性是最简单高效的实现方式。

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