如何在 Flutter 中将 TextFormField 的文本对齐到中心、垂直？答案

【问题标题】：How to align text of TextFormField to center, vertical in Flutter?如何在 Flutter 中将 TextFormField 的文本对齐到中心、垂直？
【发布时间】：2023-03-13 23:58:01
【问题描述】：

我是 Flutter 开发的新手，尝试了一些解决方法，但没有任何帮助。我希望我的文本在颤动中在TextFormField 中垂直居中。

textAlign: TextAlign.start 将我的文本带到左边，但我希望它们也垂直居中。 textAlign: TextAlign.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.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,
          ),
        ],
      ),
    )));
}

【问题讨论】：

你的意思是在 TextInput 中的文本应该垂直居中？
是的没错，提示和输入文本都应该是 center_vertically @dhuma1981
你是怎么解决这个问题的？
还没收到解决方案，如果可以解决请回答。
只需用 Padding 包裹 TextFormField 并将 EdgeInsets.all(/*value*/) 作为填充。最好将所有内容包含在容器中。并将 shapeDecoration 提供给容器和带有 Padding 的 TextFormField 内部。并删除所有 textAlign 属性

标签： android flutter

【解决方案1】：

没有垂直对齐选项。您需要做的就是设置contentPadding进行定位：

TextFormField(
    decoration: InputDecoration(
        contentPadding: EdgeInsets.zero
     )

Screenshot

【讨论】：

遗憾的是我不知道如何右对齐标签文本，但这个解决方案给了我一个想法。
对我有用，非常感谢兄弟

【解决方案2】：

使用以下属性：

TextFormField(
textAlignVertical: TextAlignVertical.center,
//Remaining code.
),

【讨论】：

【解决方案3】：

我使用“alignment: Alignment.center,” 的方式来处理带有“InputDecoration.collapsed”和“.copyWith(isDense: true) 的容器)":

          Scaffold(
            body: Container(
              color: Colors.white,
              width: double.infinity,
              height: double.infinity,
              child: Center(
                child: Padding(
                  padding: EdgeInsets.symmetric(horizontal: 16.0),
                  child: Container(
                    height: 50.0,
                    alignment: Alignment.center,
                    color: Colors.greenAccent,
                    child: TextFormField(
                      cursorColor: Colors.red,
                      decoration: InputDecoration.collapsed(
                        hintText: 'Search',
                      ).copyWith(isDense: true),
                    ),
                  ),
                ),
              ),
            ),
          ),

【讨论】：

isCollapsed 是正确的答案，是的。谢谢

【解决方案4】：

所以它对我来说非常有效：

TextFormField(
  // setting text alignment
  textAlignVertical: TextAlignVertical.center,
  decoration: InputDecoration(
    // decorating and styling your Text
    isCollapsed: true,
    contentPadding: EdgeInsets.zero,
  ),
),

【讨论】：

【解决方案5】：

TextFormField(
 textAlign: TextAlign.center,
)

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。