flutter - 在调用SetState()之后Flutter无法重新构建窗口小部件

Question

在processForm()函数中，小部件应该重新构建并显示加载进度指示器，但工作不正常，我在做什么错呢？isLoading的值确实已更新，但小部件未更新
这是功能:

processForm() {
      if (formKey.currentState.validate()) {
        setState(() {
          isLoading = true;
        });
        auth.signUpWithEmailAndPassword(
            uiEmailController.text, uiPasswordController.text);
      }
    }

这是Widget的完整代码:

class SignUp extends StatefulWidget {
  @override
  _SignUpState createState() => _SignUpState();
}

class _SignUpState extends State<SignUp> {
  @override
  Widget build(BuildContext context) {
    bool isLoading = false;
    AuthMethods auth = AuthMethods();
    final formKey = GlobalKey<FormState>();
    TextEditingController uiUsernameController = TextEditingController();
    TextEditingController uiEmailController = TextEditingController();
    TextEditingController uiPasswordController = TextEditingController();
    processForm() {
      if (formKey.currentState.validate()) {
        setState(() {
          isLoading = true;
        });
        auth.signUpWithEmailAndPassword(
            uiEmailController.text, uiPasswordController.text);
      }
    }

    return Scaffold(
      appBar: myAppBar(),
      body: isLoading
          ? Center(
              child: CircularProgressIndicator(),
            )
          : Center(
              child: SingleChildScrollView(
                child: Padding(
                  padding: const EdgeInsets.all(25.0),
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Text(
                        "Sign Up",
                        style: TextStyle(color: Colors.white, fontSize: 20),
                      ),
                      SizedBox(
                        height: 10,
                      ),
                      Form(
                        key: formKey,
                        child: Column(
                          children: [
                            TextFormField(
                              validator: (username) {
                                return username.length > 5
                                    ? null
                                    : "Invalid Username";
                              },
                              controller: uiUsernameController,
                              style: myInputTextStyle(),
                              decoration: myTextFieldDecoration("Username"),
                            ),
                            TextFormField(
                              validator: (mail) {
                                return RegExp(
                                            r"^[a-zA-Z0-9.a-zA-Z0-9.!#$%&'*+-/=?^_`{|}~]+@[a-zA-Z0-9]+\.[a-zA-Z]+")
                                        .hasMatch(mail)
                                    ? null
                                    : "Not a valid Email Address";
                              },
                              controller: uiEmailController,
                              style: myInputTextStyle(),
                              decoration: myTextFieldDecoration("Email"),
                            ),
                            TextFormField(
                              validator: (password) {
                                return password.length >= 6
                                    ? null
                                    : "password too short";
                              },
                              controller: uiPasswordController,
                              style: myInputTextStyle(),
                              obscureText: true,
                              decoration: myTextFieldDecoration("Password"),
                            ),
                          ],
                        ),
                      ),
                      SizedBox(
                        height: 20,
                      ),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.end,
                        children: [
                          Column(
                            crossAxisAlignment: CrossAxisAlignment.end,
                            children: [
                              GestureDetector(
                                onTap: () {
                                  Navigator.pushReplacementNamed(
                                      context, '/SignIn');
                                },
                                child: Text(
                                  "Already have an account?",
                                  style: TextStyle(color: Colors.white),
                                ),
                              ),
                              SizedBox(
                                height: 5,
                              ),
                              FlatButton(
                                  shape: RoundedRectangleBorder(
                                      borderRadius: BorderRadius.circular(20)),
                                  color: Colors.white,
                                  onPressed: () {
                                    processForm();
                                  },
                                  textColor: Colors.indigoAccent,
                                  child: Text("Sign up")),
                              FlatButton(
                                  shape: RoundedRectangleBorder(
                                      borderRadius: BorderRadius.circular(20)),
                                  color: Colors.white,
                                  onPressed: () {},
                                  textColor: Colors.indigoAccent,
                                  child: Text("Sign up with Google")),
                            ],
                          ),
                        ],`enter code here`
                      ),
                    ],
                  ),
                ),
              ),
            ),
    );
  }

Answer 1

问题是您已将变量放在build中。
不要这样做，而是将其放置为State的属性:

class _SignUpState extends State<SignUp> {
  bool isLoading = false;
  AuthMethods auth = AuthMethods();
  final formKey = GlobalKey<FormState>();
  TextEditingController uiUsernameController = TextEditingController();
  TextEditingController uiEmailController = TextEditingController();
  TextEditingController uiPasswordController = TextEditingController();


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: myAppBar(),
      body: isLoading
          ? Center(
              child: CircularProgressIndicator(),
            )
          : Center(...),
    );
  }
}