如何设置FormLayout行内组件的垂直对齐方式

完全可以自定义FormLayout行内部件的垂直对齐方式，不同技术栈的常用实现方案如下：

• Qt QFormLayout场景
  调用布局实例的setAlignment()方法指定目标组件的对齐规则，或者直接针对指定行设置全局对齐：

  // 仅设置单个目标组件对齐到行顶
  formLayout->setAlignment(yourGreenWidget, Qt::AlignTop);
  // 针对指定行（行索引从0开始）所有组件统一设置顶部对齐
  formLayout->setRowAlignment(1, Qt::AlignTop);
  

• Ant Design Form（React）场景
  给对应Form.Item配置样式，指定交叉轴对齐为flex-start即可：

  <Form
    layout="horizontal"
    // 全局设置所有表单项顶部对齐也可以加这个属性
    // labelCol={{ style: { alignItems: 'flex-start' } }}
  >
    <Form.Item
      label="备注"
      name="remark"
      style={{ alignItems: 'flex-start', background: 'lightgreen' }}
    >
      <Input.TextArea rows={4} />
    </Form.Item>
  </Form>
  

• Element Plus/Element UI Form（Vue）场景
  给目标el-form-item添加自定义样式类，覆盖默认的居中对齐规则：

  <template>
    <el-form label-width="80px">
      <el-form-item label="备注" class="align-top">
        <el-input type="textarea" :rows="4" />
      </el-form-item>
    </el-form>
  </template>
  <style scoped>
  .align-top :deep(.el-form-item__content) {
    align-items: flex-start;
  }
  </style>
  

设置完成后绿色背景的字段会对齐到行顶部，和你示例的需求匹配：

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