Dart 颤振中文本字段的垂直居中文本

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

我怎样才能解决这个问题

以下是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))),
  ),

---

使用提供的主题数据和有限的代码复制此错误时遇到问题。请发布整个build（）函数

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.
    );
  }
}

导入“包装：颤振/材料.省道”；
进口“包装：颤振/材料.省道”；
void main（）=>runApp（新的MyApp（））；
类MyApp扩展了无状态小部件{
//此小部件是应用程序的根。
@凌驾
小部件构建（构建上下文）{
返回新材料PP(
标题：“颤振演示”，
主题：主题数据(
fontFamily:“产品无”，
亮度：亮度。暗，
按钮颜色：颜色。绿色[300]，
accentColor:颜色。绿色[300]，
脚手架背景颜色：颜色。蓝灰色[900]，
画布颜色：颜色。蓝灰色[900]，
文本选择颜色：新颜色。来自RGBO（81、107、84、0.8），
bottomAppBarColor:颜色.蓝灰色[800]，
原色：颜色。蓝灰色[900]，
指示颜色：颜色。绿色[300]，
cardColor:Colors.white，
highlightColor:颜色。绿色[300]，
errorColor:Colors.red[400]，
text选择手柄颜色：Colors.green[300]，
splashColor:Colors.white10，
buttonTheme：新建buttonTheme数据(
形状：新的RoundedRectangleBorder(
borderRadius:新的borderRadius.circular（22.0）），
inputDecorationTheme：新的inputDecorationTheme(
内容填充：
新边缘组。对称（水平：10.0，垂直：10.0），
边框：新大纲输入边框(
gapPadding:3.0，
borderRadius:新的borderRadius.circular（22.0）），
),
主页：新MyHomePage（标题：“颤振演示主页”），
);
}
}
类MyHomePage扩展StatefulWidget{
MyHomePage（{Key，this.title}）：超级（Key:Key）；
最后的字符串标题；
@凌驾
_MyHomePageState createState（）=>new_MyHomePageState（）；
}
类_MyHomePageState扩展状态{
@凌驾
小部件构建（构建上下文）{
TextEditingController=新的TextEditingController（）；
归还新脚手架(
appBar：新的appBar(
标题：新文本（widget.title），
),
车身：新衬垫(
填充：常量边集。对称（垂直：8.0），
子项：新建TextFormField(
maxLines:1，
控制器：控制器，
验证器：（值）{
if（value.isEmpty）{
返回“请输入用户名”；
}
},
装饰：新的输入装饰(
labelText:'用户名'，
suffixIcon：新图标按钮(
highlightColor:Colors.transparent，
图标：新容器（宽度：36.0，子级：新图标（Icons.clear）），
已按下：（）{
controller.clear（）；
},
splashColor:Colors.transparent，
),
前缀：新图标（Icons.account\u circle）），
),
)，//此尾随逗号使生成方法的自动格式设置更方便。
);
}
}

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

---

您可以尝试使用内容填充（.all或.only）

以前

---

在

文本对齐垂直。居中为我工作

例如：

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

---

使用文本字段：

expands: true,
textAlignVertical: TextAlignVertical.center,

---

这有助于我进行垂直定心：

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

---

您可以尝试使用

suffix

代替

suffix

或使用

Center

包装

TextField

。这对我来说很有用。

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

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

---

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),
            )),
      ),

---

我认为错误在于字体。您的pubspec中没有产品Sans字体。yaml可能。。。我换了机器人，问题就解决了。。。我猜这是一个字体错误，而不是颤振错误。哇，我们通过无法复制错误来解决这个问题，真是太棒了。干得好！默认情况下，您可以始终使用产品SAN，并指定对文本输入和其他内容使用无缺陷字体。我通过将“prefixIcon”替换为“icon”成功地将文本居中。我认为这应该是可以接受的答案，因为它确实有效，允许使用任何字体，而不只是使用robot。谢谢这确实奏效了。但是有人能解释一下为什么这样做吗？我无法理解10.0 padding是如何将此输入中的文本居中的？

TextAlign.center

使其水平和垂直居中。问题只是问如何垂直进行。这应该是答案

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

TextField(
  textAlignVertical: TextAlignVertical.center,
  decoration: InputDecoration(
    prefixIcon: Icon(...),
    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),
            )),
      ),