Question

我是Flutter Development＆amp;尝试过某些工作，但没有任何帮助。我希望我的文字在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,
          ),
        ],
      ),
    )));
}

Answer 1

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

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

Screenshot

Answer 2

我对容器使用“ 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),
                    ),
                  ),
                ),
              ),
            ),
          ),

Answer 3

使用以下属性：

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

Answer 4

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

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

如何将TextFormField的文本与Flutter中的垂直对齐？

4 个答案: