如何使ElevatedButton与相邻TextField的高度保持对齐？

从图片可见，当前按钮高度高于TextField。

解决方案 #

要实现两者高度对齐，核心是统一内边距或高度，以下是几种实用方法：

• 利用IntrinsicHeight统一行内组件高度
  用IntrinsicHeight包裹按钮，配合Row的crossAxisAlignment: CrossAxisAlignment.stretch，让按钮自动匹配TextField的高度：

  Row(
    crossAxisAlignment: CrossAxisAlignment.stretch,
    children: [
      Expanded(
        child: TextField(
          decoration: InputDecoration(
            border: OutlineInputBorder(),
            hintText: '输入内容',
          ),
        ),
      ),
      SizedBox(width: 8.w),
      IntrinsicHeight(
        child: ElevatedButton(
          style: ElevatedButton.styleFrom(
            minimumSize: Size.zero,
            padding: EdgeInsets.symmetric(horizontal: 8.w),
            shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
          ),
          onPressed: () {},
          child: Text(
            "인증번호 요청",
            style: TextStyle(fontSize: 16.0.sp, color: Colors.white),
          ),
        ),
      ),
    ],
  )
  

• 固定统一高度
  给TextField和按钮设置相同的固定高度，比如用SizedBox包裹：

  Row(
    children: [
      Expanded(
        child: SizedBox(
          height: 48.h,
          child: TextField(
            decoration: InputDecoration(
              border: OutlineInputBorder(),
              hintText: '输入内容',
            ),
          ),
        ),
      ),
      SizedBox(width: 8.w),
      SizedBox(
        height: 48.h,
        child: ElevatedButton(
          style: ElevatedButton.styleFrom(
            minimumSize: Size.zero,
            padding: EdgeInsets.symmetric(horizontal: 8.w),
            shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
          ),
          onPressed: () {},
          child: Text(
            "인증번호 요청",
            style: TextStyle(fontSize: 16.0.sp, color: Colors.white),
          ),
        ),
      ),
    ],
  )
  

• 调整按钮内边距匹配TextField
  移除按钮的垂直内边距，让文本居中，同时确保按钮整体高度和TextField对齐：

  ElevatedButton(
    style: ElevatedButton.styleFrom(
      minimumSize: Size.zero,
      padding: EdgeInsets.symmetric(horizontal: 8.w),
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
      alignment: Alignment.center,
    ),
    onPressed: () {},
    child: Text(
      "인증번호 요청",
      style: TextStyle(fontSize: 16.0.sp, color: Colors.white),
    ),
  )
  

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