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

Question

我是Flutter Development的新手，曾尝试过某些工作，但没有任何帮助。我想我的文字是垂直居中的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

使用以下属性：

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

Answer 2

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

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

截屏

Answer 3

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

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

Answer 4

TextFormField(
 textAlign: TextAlign.center,
)

Answer 5

我使用“ 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 6

您可以像这样使用装饰属性：

decoration: InputDecoration(
                        isCollapsed: true,
                        isDense: true,
                        contentPadding: EdgeInsets.symmetric(horizontal: 5),
    ),