如何在 Flutter 中將 TextFormField 的文本對齊到中心、垂直？

Question

我是 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,
          ),
        ],
      ),
    )));
}

Answer 1

沒有垂直對齊選項。 您需要做的就是設置contentPadding進行定位：

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

截屏

Answer 2

使用以下屬性：

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

Answer 3

我使用“ alignment: Alignment.center ”對帶有“ InputDecoration.collapsed ”和“ .copyWith(isDense:true) ”的Container 執行此操作的方式：

          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 4

所以它對我來說非常有效：

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

Answer 5

TextFormField(
 textAlign: TextAlign.center,
)

Answer 6

您可以像這樣使用裝飾屬性：

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