单击 TextField 小部件时颤动小部件重建

Question

我确定这是一个新手错误，但我似乎无法弄清楚这一点。在下面的应用程序中，当单击第二条路线中的文本字段时，键盘会打开并立即关闭。经过仔细调查，似乎每当它获得焦点时就会重新构建小部件，从而导致路线重置，使用户无法输入文本。

当我从表单中删除“密钥”时，问题不会发生。这不是一个长期修复，因为我需要“密钥”以便我可以验证表单。

有任何想法吗？

import 'package:flutter/material.dart';


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

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My app',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.lightBlue,
        fontFamily: 'Nunito',
      ),
      home: LoginPage(),
    );
  }
}


class LoginPage extends StatefulWidget {

  @override
  LoginPageState createState() {
    return new LoginPageState();
  }
}

class LoginPageState extends State<LoginPage> {

  Widget build(BuildContext context) {

    final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();

    final registerButton = Padding(
      padding: EdgeInsets.symmetric(vertical: 16.0),
      child: RaisedButton(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(24),
        ),
        onPressed: () {
          Navigator.push(
            context,
            MaterialPageRoute(builder: (context) => SecondPage()),
          );
        },
        child: Text('Register Now', style: TextStyle(color: Colors.white)),
      ),
    );

    // Now load the main login page
    return Scaffold(
      backgroundColor: Colors.white,
      key: _scaffoldKey,
      body: Center(
        child: ListView(
          shrinkWrap: true,
          children: <Widget>[
            registerButton,
          ],
        ),
      ),
    );
  }
}


class SecondPage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {

    final emailController =  TextEditingController();
    final _formKey = GlobalKey<FormState>();

    final email = TextFormField(
      keyboardType: TextInputType.emailAddress,
      controller: emailController,
      autofocus: false,
      decoration: InputDecoration(
        hintText: 'Email',
        contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
        border: OutlineInputBorder(borderRadius: BorderRadius.circular(32.0)),
      ),
    );

    return Scaffold(
      appBar: AppBar(
        title: Text('Second page'),
      ),
      body: Center(
        child: Form(
          key: _formKey,
          child: email,
        ),
      ),
    );
  }
}

Answer 1

如果您的屏幕依赖于MediaQuery或至少在 MediaQuery 上有一个小部件，键盘弹出窗口会更改屏幕的大小，这会触发 mediaQuery 并导致重建...在这种情况下，请避免使用 mediaQuery，而是使用 (sizer 包）https://pub.dev/packages/sizer

Answer 2

您必须在构建方法之外将_formKey声明为静态。

Answer 3

当我们单击TextField时，build()颤动会自动调用方法，因此您的所有对象都会重新创建，并在方法内初始化build()。

这就是为什么总是创建全局变量，用于Form()类似：

final emailController =  TextEditingController();
final _formKey = GlobalKey<FormState>();