颤抖的TextField小部件的prefixIcon在聚焦TextField时消失。怎么解决?

时间:2019-07-27 12:25:29

标签: flutter flutter-layout

只是在探索颤动而陷入困境。 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'),
                              ),
                            ),
                          ],
                        ),
                      )
              )
            );
          }
        }

3 个答案:

答案 0 :(得分:1)

问题是我将原色设置为白色。因此,每当重点关注领域时,背景就会变白,就会令人失望。我不好。

答案 1 :(得分:0)

这对我来说很好

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

答案 2 :(得分:0)

当我将TextField添加到AppBar作为标题时,问题出现了。 要解决此问题,只需在图标上添加颜色即可。

例如

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

应替换为

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

我发布了issue,但没有回复。