Question

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

我该如何解决这个问题？

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

textAlignVertical.center 为我工作。

示例：

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

Answer 2

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

OtherFunction1

之前

之后

Answer 3

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

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

Answer 4

我无法使用ThemeData和提供的有限代码重现此错误。请发布整个build（）函数。 Here's what I'm seeing with this code and version

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 5

这有助于我进行垂直居中：

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

Answer 6

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

textAlign: TextAlign.center

Answer 7

您可以尝试用 useEffect( () => console.log("Checked", state.checkedBoxes), [state.checkedBoxes], ); 代替 suffix 或用 suffixIcon 包裹 TextField。这对我有用。

Answer 8

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

example image

Answer 9

使用扩展的文本字段：

expands: true,
textAlignVertical: TextAlignVertical.center,

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

9 个答案: