setState 在浮動操作按鈕內不起作用並且無法在 flutter 中呈現 ui？

Question

我正在嘗試在浮動操作按鈕內使用 setState class 但是，setState class 無法重新呈現 ui。這是我的代碼：這里我使用 isLogin bool 類型變量，因此它能夠切換兩個不同的 ui。實際上是當 setState function 調用它必須更改該變量的值是重新渲染 ui 但它不工作時，不能工作。

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class AuthForm extends StatefulWidget {
  @override
  _AuthFormState createState() => _AuthFormState();
}

class _AuthFormState extends State<AuthForm> {
  @override
  Widget build(BuildContext context) {
    final _formKey = GlobalKey<FormState>();
    var _isLogin = true;
    var _userEmail = '';
    var _userName = '';
    var _userPassword = '';

    void _trySubmit() {
      final isValid = _formKey.currentState.validate();
      FocusScope.of(context).unfocus();
      if (isValid) {
        _formKey.currentState.save();
        print(_userEmail);
        print(_userPassword);
        print(_userName);
      }
    }

    return Center(
      child: Card(
        margin: EdgeInsets.all(20),
        child: SingleChildScrollView(
          child: Padding(
            padding: EdgeInsets.all(16),
            child: Form(
              key: _formKey,
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  TextFormField(
                    validator: (value) {
                      if (value.isEmpty || !value.contains('@')) {
                        return 'Please enter the valid email address.';
                      }
                      return null;
                    },
                    keyboardType: TextInputType.emailAddress,
                    decoration: InputDecoration(
                      labelText: 'Email Address',
                    ),
                    onSaved: (newValue) {
                      _userEmail = newValue;
                    },
                  ),
                  TextFormField(
                    validator: (value) {
                      if (value.isEmpty || value.length < 4) {
                        return 'Please enter at least 4 character.';
                      }
                      return null;
                    },
                    decoration: InputDecoration(
                      labelText: 'Username',
                    ),
                    onSaved: (newValue) {
                      _userName = newValue;
                    },
                  ),
                  TextFormField(
                    validator: (value) {
                      if (value.isEmpty || value.length < 7) {
                        return 'Password must be at least 7 character long.';
                      }
                      return null;
                    },
                    decoration: InputDecoration(
                      labelText: 'Password',
                    ),
                    obscureText: true,
                    onSaved: (newValue) {
                      _userPassword = newValue;
                    },
                  ),
                  SizedBox(
                    height: 20,
                  ),
                  RaisedButton(
                    onPressed: () {
                      _trySubmit();
                    },
                    child: Text(
                      _isLogin ? 'Login' : 'Signup',
                    ),
                  ),
                  FlatButton(
                    textColor: Theme.of(context).primaryColor,
                    child: Text(
                      _isLogin
                          ? 'Create New Account.'
                          : 'I Already Have Account.',
                    ),
                    onPressed: () {
                      setState(() {
                        _isLogin = !_isLogin;
                      });
                    },
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Answer 1

問題在於var _isLogin = true; 您已經在build方法中定義了它，這就是為什么每當調用setState時它都會變為true並且不會更改 ui。

嘗試將它放在build方法之外。 下面的例子：

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return AuthForm();
  }
}

class AuthForm extends StatefulWidget {
  @override
  _AuthFormState createState() => _AuthFormState();
}

class _AuthFormState extends State<AuthForm> {
   var _isLogin = true;
  @override
  Widget build(BuildContext context) {
    final _formKey = GlobalKey<FormState>();
   
    var _userEmail = '';
    var _userName = '';
    var _userPassword = '';

    void _trySubmit() {
      final isValid = _formKey.currentState.validate();
      FocusScope.of(context).unfocus();
      if (isValid) {
        _formKey.currentState.save();
        print(_userEmail);
        print(_userPassword);
        print(_userName);
      }
    }

    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Card(
            margin: EdgeInsets.all(20),
            child: SingleChildScrollView(
              child: Padding(
                padding: EdgeInsets.all(16),
                child: Form(
                  key: _formKey,
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: <Widget>[
                      TextFormField(
                        validator: (value) {
                          if (value.isEmpty || !value.contains('@')) {
                            return 'Please enter the valid email address.';
                          }
                          return null;
                        },
                        keyboardType: TextInputType.emailAddress,
                        decoration: InputDecoration(
                          labelText: 'Email Address',
                        ),
                        onSaved: (newValue) {
                          _userEmail = newValue;
                        },
                      ),
                      TextFormField(
                        validator: (value) {
                          if (value.isEmpty || value.length < 4) {
                            return 'Please enter at least 4 character.';
                          }
                          return null;
                        },
                        decoration: InputDecoration(
                          labelText: 'Username',
                        ),
                        onSaved: (newValue) {
                          _userName = newValue;
                        },
                      ),
                      TextFormField(
                        validator: (value) {
                          if (value.isEmpty || value.length < 7) {
                            return 'Password must be at least 7 character long.';
                          }
                          return null;
                        },
                        decoration: InputDecoration(
                          labelText: 'Password',
                        ),
                        obscureText: true,
                        onSaved: (newValue) {
                          _userPassword = newValue;
                        },
                      ),
                      SizedBox(
                        height: 20,
                      ),
                      RaisedButton(
                        onPressed: () {
                          _trySubmit();
                        },
                        child: Text(
                          _isLogin ? 'Login' : 'Signup',
                        ),
                      ),
                      FlatButton(
                        textColor: Theme.of(context).primaryColor,
                        child: Text(
                          _isLogin
                              ? 'Create New Account.'
                              : 'I Already Have Account.',
                        ),
                        onPressed: () {
                         
                          setState(() {
                            _isLogin = !_isLogin;
                          });
                        },
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

讓我知道它是否有效。