Flutter 中文本字段中的文本垂直居中

Question

我正在创建一个包含用户名和密码字段的登录屏幕，但文本似乎总是有点偏离顶部（参见图片）。

问题图片

它应该是什么样子（用Photoshop做的）

我该如何解决这个问题？

这是 TextFormField 的代码：

new Padding(
                    padding: const EdgeInsets.symmetric(vertical: 8.0),
                    child: new TextFormField(
                      maxLines: 1,
                      controller: controller,
                      validator: (value) {
                        if (value.isEmpty) {
                          return 'Please enter username.';
                        }
                      },
                      decoration: new InputDecoration(
                          labelText: 'Username',
                          suffixIcon: new IconButton(
                            highlightColor: Colors.transparent,
                            icon: new Container(
                                width: 36.0, child: new Icon(Icons.clear)),
                            onPressed: () {
                              controller.clear();
                            },
                            splashColor: Colors.transparent,
                          ),
                          prefixIcon: new Icon(Icons.account_circle)),
                    ),
                  ),

这是我的通用主题代码，如果有帮助的话^^

new ThemeData(
    fontFamily: 'Product Sans',
    brightness: Brightness.dark,
    buttonColor: Colors.green[300],
    accentColor: Colors.green[300],
    scaffoldBackgroundColor: Colors.blueGrey[900],
    canvasColor: Colors.blueGrey[900],
    textSelectionColor: new Color.fromRGBO(81, 107, 84, 0.8),
    bottomAppBarColor: Colors.blueGrey[800],
    primaryColor: Colors.blueGrey[900],
    indicatorColor: Colors.green[300],
    cardColor: Colors.white,
    highlightColor: Colors.green[300],
    errorColor: Colors.red[400],
    textSelectionHandleColor: Colors.green[300],
    splashColor: Colors.white10,
    buttonTheme: new ButtonThemeData(
        shape: new RoundedRectangleBorder(
            borderRadius: new BorderRadius.circular(22.0))),
    inputDecorationTheme: new InputDecorationTheme(
        contentPadding:
            new EdgeInsets.symmetric(horizontal: 10.0, vertical: 10.0),
        border: new OutlineInputBorder(
            gapPadding: 3.0,
            borderRadius: new BorderRadius.circular(22.0))),
  ),

Answer 1

您可以尝试使用 contentPadding（.all 或 .only）

TextFormField(
...
decoration: InputDecoration(
    contentPadding: EdgeInsets.all(10.0),
...
)

之前

之后

Answer 2

textAlignVertical.center为我工作。

示例：

TextFormField(
  textAlignVertical: TextAlignVertical.center,
  ...
)

Answer 3

如果你有一个 prefixIcon，将 isCollapsed 设置为 true 就是诀窍。

TextField(
  textAlignVertical: TextAlignVertical.center,
  decoration: InputDecoration(
    prefixIcon: Icon(...),
    isCollapsed: true,
  ),
),

Answer 4

如果您也使用

textAlign: TextAlign.center

，

isCollapsed: true

也可以使用 这是一个例子：

Container(
        width: MediaQuery.of(context).size.width * 0.88 * 0.6,
        height: 40.0,
        color: Colors.amber,
        alignment: Alignment.centerLeft,
        padding: EdgeInsets.only(right: 18.0),
        child: TextField(
            textAlignVertical: TextAlignVertical.center,
            obscureText: false,
            decoration: InputDecoration(
              isCollapsed: true,
              enabledBorder: UnderlineInputBorder(
                borderSide: BorderSide(color: darkbrown),
              ),
              focusedBorder: UnderlineInputBorder(
                borderSide: BorderSide(color: darkbrown),
              ),
              border: UnderlineInputBorder(
                borderSide: BorderSide(color: darkbrown),
              ),
              labelStyle: GoogleFonts.roboto(color: Colors.black, fontSize: 14, fontWeight: FontWeight.normal),
              hintText: "Hint text",
              hintStyle: GoogleFonts.roboto(color: Colors.grey, fontSize: 14, fontWeight: FontWeight.normal),
            )),
      ),

示例图片

Answer 5

我在使用 ThemeData 和提供的有限代码重现此错误时遇到问题。请发布整个 build() 函数。 这是我在这段代码和版本中看到的内容。

flutter --version

Flutter 0.4.4 • channel beta • https://github.com/flutter/flutter.git
Framework • revision f9bb4289e9 (3 weeks ago) • 2018-05-11 21:44:54 -0700
Engine • revision 06afdfe54e
Tools • Dart 2.0.0-dev.54.0.flutter-46ab040e58

main.dart：

import 'package:flutter/material.dart';

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        fontFamily: 'Product Sans',
        brightness: Brightness.dark,
        buttonColor: Colors.green[300],
        accentColor: Colors.green[300],
        scaffoldBackgroundColor: Colors.blueGrey[900],
        canvasColor: Colors.blueGrey[900],
        textSelectionColor: new Color.fromRGBO(81, 107, 84, 0.8),
        bottomAppBarColor: Colors.blueGrey[800],
        primaryColor: Colors.blueGrey[900],
        indicatorColor: Colors.green[300],
        cardColor: Colors.white,
        highlightColor: Colors.green[300],
        errorColor: Colors.red[400],
        textSelectionHandleColor: Colors.green[300],
        splashColor: Colors.white10,
        buttonTheme: new ButtonThemeData(
            shape: new RoundedRectangleBorder(
                borderRadius: new BorderRadius.circular(22.0))),
        inputDecorationTheme: new InputDecorationTheme(
            contentPadding:
                new EdgeInsets.symmetric(horizontal: 10.0, vertical: 10.0),
            border: new OutlineInputBorder(
                gapPadding: 3.0,
                borderRadius: new BorderRadius.circular(22.0))),
      ),
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    TextEditingController controller = new TextEditingController();
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Padding(
        padding: const EdgeInsets.symmetric(vertical: 8.0),
        child: new TextFormField(
          maxLines: 1,
          controller: controller,
          validator: (value) {
            if (value.isEmpty) {
              return 'Please enter username.';
            }
          },
          decoration: new InputDecoration(
              labelText: 'Username',
              suffixIcon: new IconButton(
                highlightColor: Colors.transparent,
                icon: new Container(width: 36.0, child: new Icon(Icons.clear)),
                onPressed: () {
                  controller.clear();
                },
                splashColor: Colors.transparent,
              ),
              prefixIcon: new Icon(Icons.account_circle)),
        ),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

Answer 6

这帮助我垂直居中：

 TextField(
    ...
           decoration: InputDecoration(
                contentPadding: EdgeInsets.only(),
                ...
           )
    ...

Answer 7

看到这些答案我很沮丧，并且它们都不适合我，直到我做了一些愚蠢的事情，比如添加负填充

InputDecoration(contentPadding: EdgeInsets.only(top: -5.0),

不开玩笑，它有效。

Answer 8

指定 suffixIcon/prefixIcon 比后缀/前缀参数更合适（当使用图标时！）。有时，TextField 实例的后缀/前缀属性会使小部件的高度有点扭曲，这通常是不受欢迎的。

Answer 9

对我来说，我使用 isCollapsed （通过装饰设置）为 true 和 textAlignVertical to center 是解决此问题的合适解决方案，而不是使用 contentPadding。这是我的代码：

TextFormField(
      textAlignVertical: TextAlignVertical.center,
      textInputAction: TextInputAction.search,
      maxLines: 1,
      style: Get.textTheme.bodyText1?.apply(
                fontSizeFactor: 1.5,
             ),
             decoration: InputDecoration(
             isCollapsed: true,
             prefixIcon: Icon(Icons.search),
             border: InputBorder.none,
             floatingLabelBehavior: FloatingLabelBehavior.never,
             label: Text(
                 'Search',
                 style: TextStyle(
                   fontSize: 20,
                 ),
             ),
             fillColor: AppColors.primary,
          ),
)

Answer 10

TextField(
 textAlignVertical: TextAlignVertical.center,
  decoration: InputDecoration(
  contentPadding: EdgeInsets.zero,),)

Answer 11

您可以尝试用

suffix

代替

suffixIcon

或用

TextField

包裹

Center

。这对我来说是工作。

Answer 12

如果您的文本字段有最大行数，您可以通过根据最大行数设置提示样式的高度来实现 比如：如果 maxlines:5，你可以设置 height:4

Answer 13

对我来说有效的是：

 TextFormField(
 ...
 expands: true,
 minLines: null,
 maxLines: null,   
 textAlignVertical: TextAlignVertical.center,
 ...
 )

Answer 14

文本字段输入设置垂直和水平居中，

textAlign: TextAlign.center