Flutter中如何让TextFormField文本左对齐且垂直居中？

嘿，我完全懂你的困扰——想要TextFormField里的文本既左对齐又垂直居中，试了几种方法都没搞定对吧？别担心，这其实是个很常见的小问题，咱们一步一步来解决它～

问题根源 #

你之前尝试的textAlign属性只负责水平方向的对齐：TextAlign.start（或TextAlign.left）是左对齐，TextAlign.center是水平居中，但它们都管不了垂直方向的位置。要实现垂直居中，咱们需要用到另一个专门的属性：textAlignVertical。

解决方案 #

只需要对你的代码做两处关键修改：

1. 将textAlign设为TextAlign.start，保证文本水平左对齐
2. 添加textAlignVertical: TextAlignVertical.center，强制文本垂直居中

修改后的完整代码片段 #

@override
Widget build(BuildContext context) {
  return new Form(
    key: _formKey,
    child: new SingleChildScrollView(
      child: new Theme(
        data: new ThemeData(
          primaryColor: const Color(0xFF102739),
          accentColor: const Color(0xFF102739),
          hintColor: const Color(0xFF102739)
        ),
        child: new Column(
          children: <Widget>[
            new TextFormField(
              textAlign: TextAlign.start, // 水平左对齐
              textAlignVertical: TextAlignVertical.center, // 垂直居中
              maxLines: 1,
              autofocus: true,
              keyboardType: TextInputType.emailAddress,
              style: new TextStyle(
                color: const Color(0xFF0f2638),
                fontFamily: 'ProximaNova',
                fontStyle: FontStyle.italic,
                fontSize: 16.0
              ),
              decoration: new InputDecoration(
                contentPadding: const EdgeInsets.only(
                  top: 8.0,
                  bottom: 8.0,
                  left: 10.0,
                  right: 10.0
                ),
                hintText: "YOUR E-MAIL",
                hintStyle: new TextStyle(
                  color: const Color(0x703D444E),
                  fontFamily: 'ProximaNova',
                  fontStyle: FontStyle.italic,
                  fontSize: 16.0
                ),
                border: new UnderlineInputBorder(
                  borderSide: new BorderSide(
                    color: const Color(0xFF0f2638),
                    width: 0.2
                  )
                )
              ),
              validator: _validateEmail,
            ),
          ],
        )
      )
    )
  );
}

额外提示 #

如果你的输入框高度比较高，或者垂直居中效果不够明显，可以调整InputDecoration里的contentPadding上下值，或者加上isDense: true属性让输入框更紧凑，进一步优化垂直居中的视觉效果。

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