Flutter中如何调整TextFormField高度使其与按钮等高？

嘿，我刚好遇到过类似的需求，这就给你说几种调整TextFormField高度的方式，帮你把它和按钮尺寸对齐～

方法1：调整contentPadding（最常用） #

TextFormField的高度很大程度上由contentPadding决定，你当前设置的上下内边距是10.0，把这个值调大就能直接增加输入框的整体高度。比如改成和Material按钮默认高度匹配的上下内边距：

final email = TextFormField(
  keyboardType: TextInputType.emailAddress,
  autofocus: false,
  initialValue: 'sathyabaman@gmail.com',
  style: TextStyle(fontWeight: FontWeight.normal, color: Colors.white),
  decoration: InputDecoration(
    hintText: 'Email',
    // 增大上下内边距，让输入框高度和按钮一致
    contentPadding: EdgeInsets.fromLTRB(20.0, 16.0, 20.0, 16.0),
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(32.0)
    ),
  ),
);

你可以根据按钮的实际高度微调这个数值，直到视觉上完全对齐。

方法2：用Container包裹，直接指定高度 #

如果需要精确控制高度，直接用Container把TextFormField包起来，设置固定height属性就行，比如按钮高度是56的话：

final email = Container(
  height: 56, // 和你的按钮高度保持一致
  child: TextFormField(
    keyboardType: TextInputType.emailAddress,
    autofocus: false,
    initialValue: 'sathyabaman@gmail.com',
    style: TextStyle(fontWeight: FontWeight.normal, color: Colors.white),
    decoration: InputDecoration(
      hintText: 'Email',
      contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
      border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(32.0)
      ),
    ),
  ),
);

这种方式要注意，别让内部的contentPadding太大导致文本被裁剪，必要时可以适当减小contentPadding的值。

方法3：结合isDense和contentPadding（适合精细调整） #

如果你的输入框需要更紧凑的布局但又要调整高度，可以把isDense设为true，再配合contentPadding来调整：

final email = TextFormField(
  keyboardType: TextInputType.emailAddress,
  autofocus: false,
  initialValue: 'sathyabaman@gmail.com',
  style: TextStyle(fontWeight: FontWeight.normal, color: Colors.white),
  decoration: InputDecoration(
    hintText: 'Email',
    isDense: true,
    contentPadding: EdgeInsets.fromLTRB(20.0, 14.0, 20.0, 14.0),
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(32.0)
    ),
  ),
);

isDense会减少输入框的默认内部间距，再调整contentPadding就能更精准地控制高度。

总体来说，第一种方法最符合Material Design的设计规范，推荐优先尝试～

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