Flutter中TextField小部件的prefixIcon在聚焦TextField时消失。怎么解决？答案

【问题标题】：The prefixIcon of TextField widget in flutter disappears on focusing TextField. How to solve?Flutter中TextField小部件的prefixIcon在聚焦TextField时消失。怎么解决？
【发布时间】：2019-07-27 12:25:29
【问题描述】：

只是在探索颤振并卡住了。 prefixIcon 在单击字段时消失，并在聚焦时重新出现。如何解决这个问题？代码如下。尝试删除表单的键。我希望图标即使专注于或专注于外也能保留。是否有任何其他属性要设置？无法找到修复程序。

        class _MyHomePageState extends State<MyHomePage> {
          String _email = "";
          String _password = "";

          final  _formKey = GlobalKey<FormState>();
          final FocusNode _emailFocus = FocusNode();
          final FocusNode _passwordFocus = FocusNode();



          @override
          Widget build(BuildContext context) {
            return Scaffold(
              appBar: AppBar(
                title: Text(widget.title),
              ),
              body: Container(
                      padding: const EdgeInsets.symmetric(horizontal: 50.0,vertical: 100.0),
                      decoration: BoxDecoration(color: Colors.white),
                      child:Form(
                        key: _formKey,
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            TextFormField(
                              focusNode: _emailFocus,
                                decoration: InputDecoration(
                                    labelText: 'Username or email',
                                    prefixIcon: Icon(Icons.person), //prefixIcon
                                  focusedBorder: UnderlineInputBorder(),
                                  hintText: "example@mail.com",
                                )
                            ),
                            Padding(
                              padding: const EdgeInsets.symmetric(vertical: 16.0),
                            ),
                              TextFormField(
                              obscureText: true,
                              focusNode: _passwordFocus,
                                  decoration: InputDecoration(
                                    labelText: 'Password',
                                    prefixIcon: Icon(Icons.lock),
                                    focusedBorder: UnderlineInputBorder(),
                                  )
                            ) ,
                            Padding(
                              padding: const EdgeInsets.symmetric(vertical: 16.0),
                              child: RaisedButton(
                                onPressed: () {
                                  // Validate will return true if the form is valid, or false if
                                  // the form is invalid.
                                  if (_formKey.currentState.validate()) {
                                    // Process data.
                                  }
                                },
                                child: Text('Submit'),
                              ),
                            ),
                          ],
                        ),
                      )
              )
            );
          }
        }

【问题讨论】：

您好，raj，我复制了您的代码并尝试了它，并且前缀图标在聚焦时保持不变。但是您的问题是您的表单小部件未包装在可滚动小部件中，因此键盘可能会导致一些溢出问题。
我无法重现图标消失的问题。你到底面对的是什么，可以加个截图或者gif吗？

标签： flutter flutter-layout

【解决方案1】：

当我将 TextField 作为标题添加到 AppBar 时，我遇到了这个问题。要解决此问题，只需为图标添加颜色即可。

例如

prefixIcon: Icon(Icons.person), //prefixIcon

应该替换为

prefixIcon: Icon(Icons.person, color: Colors.black,), //prefixIcon

我发了issue，但还没有回复。

【讨论】：

我的问题是我确实将原色覆盖为白色。

【解决方案2】：

问题是我将原色设置为白色。因此，每当该领域被聚焦时，它就会消失，因为背景也是白色的。我的错。

【讨论】：

【解决方案3】：

这对我来说很好用

class MyHomePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _MyHomePageState();
  }
}

class _MyHomePageState extends State<MyHomePage> {
  String _email = "";
  String _password = "";

  final _formKey = GlobalKey<FormState>();
  final FocusNode _emailFocus = FocusNode();
  final FocusNode _passwordFocus = FocusNode();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('hi'),
        ),
        body: Container(
            padding: EdgeInsets.only(top: 50, left: 50, right: 50),
            decoration: BoxDecoration(color: Colors.white),
            child: Form(
              key: _formKey,
              child: ListView(
                children: <Widget>[
                  TextFormField(
                      focusNode: _emailFocus,
                      decoration: InputDecoration(
                        labelText: 'Username or email',
                        prefixIcon: Icon(Icons.person), //prefixIcon
                        focusedBorder: UnderlineInputBorder(),
                        hintText: "example@mail.com",
                      )),
                  Padding(
                    padding: EdgeInsets.only(top: 20),
                  ),
                  TextFormField(
                      obscureText: true,
                      focusNode: _passwordFocus,
                      decoration: InputDecoration(
                        labelText: 'Password',
                        prefixIcon: Icon(Icons.lock),
                        focusedBorder: UnderlineInputBorder(),
                      )),
                  Padding(
                    padding: EdgeInsets.only(top: 20),
                    child: RaisedButton(
                      onPressed: () {
                        // Validate will return true if the form is valid, or false if
                        // the form is invalid.
                        if (_formKey.currentState.validate()) {
                          // Process data.
                        }
                      },
                      child: Text('Submit'),
                    ),
                  ),
                ],
              ),
            )));
  }

【讨论】：