如何在颤动中动态设置状态变量？答案

【问题标题】：How to dynamically setState variable in flutter?如何在颤动中动态设置状态变量？
【发布时间】：2019-08-31 10:50:38
【问题描述】：

刚开始学flutter，很好奇怎么在flutter中动态setState()

在React Native中，我通常使用这样的函数来动态地setState：

class foo extends React.Component{
  state={
    username:null,
    password:null
  }

  toggleSetState(whatState, value){
    this.setState({ [whatState]: value })
  }

  render() {
    return (
      <View>
        <TextInput
          value={this.state.username}
          onChangeText={(text)=>{toggleSetState(username, text)}
        />
        <TextInput
          value={this.state.password}
          onChangeText={(text)=>{toggleSetState(password, text)}
        />
      </View>
    );
  }
}

Flutter 中上述代码的等效项是什么？

我已经在Flutter 中尝试过，但它似乎不起作用

class _LoginFormState extends State<LoginForm> {
  String username, password;

  void ToogleState(typedata, text){
    setState(() {
      typedata = text;
    });
  }

  //Widget
  TextField(
    onChanged: (text){ToogleState(username, text); print(username);},
    decoration: InputDecoration(
      hintText: 'input username', labelText: 'Username'
    ),
  ),
}

【问题讨论】：

setState 用于状态更改，这会更改用户界面，例如获取数据然后将其渲染到小部件中。在您的情况下，TextField 已经处理了大部分视觉更改，因此您不需要调用setState。 Flutter 不是 Reactjs。
@user1462442 这只是一个简单的案例，我以 TextField 为例，如果有一天您遇到复杂案例的相同问题并需要这样处理，您怎么看？例如来自 API 的动态表单，并回传到服务器
使用 initState 和期货 dartlang.org/tutorials/language/futures docs.flutter.io/flutter/widgets/State/initState.html 没有那么复杂

标签： dart flutter

【解决方案1】：

经过一番研究和尝试，我可以用下面的代码实现我想要的：

class _LoginFormState extends State<LoginForm> {
  String username, password;
  //create an object
  var loginForm = {};
  final myController = TextEditingController();

  void ToogleState(typedata, text){
    setState(() {
      //i can assign any different variable with this code
      loginForm[typedata] = text;
      //output of LoginForm: {username: foo, password: bar}
    });
  }

  //widget
  Padding(
    padding: const EdgeInsets.all(16.0),
    child: Column(
      children: <Widget>[
        TextField(
          onEditingComplete: (){print(loginForm);},
          onChanged: (text){ToogleState("username", text); print(loginForm['username']);},
          decoration: InputDecoration(
            hintText: 'input username', labelText: 'Username'
          ),
        ),
        TextField(
          onEditingComplete: (){print(loginForm);},
          onChanged: (text){ToogleState("password", text); print(loginForm['password']);},
          decoration: InputDecoration(
            hintText: 'input password', labelText: 'Password'
          ),
        ),
      ],
    ),
  );
}

【讨论】：

【解决方案2】：

您只需要创建一个变量来保存该值。我很困惑为什么在不修改临时状态时调用 setState

这里有一些有用的文档 https://flutter.dev/docs/development/data-and-backend/state-mgmt/ephemeral-vs-app

class _LoginFormState extends State<LoginForm> {
  String _username = "";
  String __password = "";
  void ToogleState( text){
    setState(() {
      _username = text;
    });
  }

  //Widget
  TextField(
    onChanged: (text){ToogleState( text); print(username);},
    decoration: InputDecoration(
      hintText: 'input username', labelText: 'Username'
    ),
  ),
}

【讨论】：

如果你需要一个期货的例子，这里有一个类似的问题。 stackoverflow.com/questions/53820419/… Flutter 比 Reactjs 更容易。你不应该有太多的麻烦
如果我有 10 个 TextField 之类的注册表单会怎样？我应该为每个变量（名称、日期、性别等）声明 ToogleState 10 次吗？
你不需要每次都写togleState。您可以改用 lambda 函数。事实上，在这种情况下，您可能根本不需要调用 setState，因为 TextField 已经在处理文本更改
你能给我一个lambda函数的例子吗？
stackoverflow.com/questions/52404206/…