扑-通过状态(提供者/消费者)更新TextField / TextEditingController

时间:2019-10-09 15:23:43

标签: flutter dart

我在“页面”上有一个TextField。我有一个TextEditingController挂钩。我可以通过简单的方法成功设置TextField的值:

usernameController.text = '1234';

但是,我需要能够从子页面更改此字段。用例是一个登录表单,用户可以在其中从应用程序内注销。当我返回登录页面时,我希望用户名/密码被清除/删除。现在,值仍然存在(显示usernameController.text中当前的内容)

总的来说,我正在通过提供商管理状态。我可以在应用程序的其他位置设置和检索/显示状态,没有问题。问题在于通过initState()中的dart代码设置了控制器。它不是要重建的小部件的一部分。

我可以在使用者内设置TextField小部件。当在子页面中更新状态(通过debug print语句确认)时,将调用构建器,但是窗口小部件本身不会反映该状态的新值(它仍然具有旧的用户名,并且不会被清空)。

                            Consumer<myAppState>(
                          builder: (context, appState, child) {
                            print("in builder for consumer: ");
                            print(appState.username);
                            return Container(
                                width: 200,
                                child: TextField(
                                  controller: usernameController,
                                  onChanged: (value) => _saveUsername(value),
                                  decoration: InputDecoration(
                                    hintText: 'Username',
                                    prefixIcon: Icon(Icons.account_circle),
                                  ),
                                ));
                          }),

我尝试更换

usernameController.text = '1234';

具有:

usernameController.text = Provider.of<myAppState>(context, listen: true).username;

但这似乎不起作用。

该“非纯”小部件(由于控制器是通过编程方式处理的)似乎不太适合要重绘小部件的Consumer模型。

有人有什么想法吗?

谢谢!

1 个答案:

答案 0 :(得分:2)

一种可能的方法是在构建器中检查状态和控制器中的值是否匹配并进行同步。

示例:

Consumer<myAppState>(
  builder: (context, appState, child) {
    print("in builder for consumer: ");
    print(appState.username);
    if (usernameController.text != appState.username) { // Or check if appState.username != null or what ever your use case is.
      usernameController.text = appState.username ?? '';
    }
    return Container(
      width: 200,
      child: TextField(
        controller: usernameController,
        onChanged: (value) => _saveUsername(value),
        decoration: InputDecoration(
          hintText: 'Username',
          prefixIcon: Icon(Icons.account_circle),
        ),
      ),
    );
  },
)

希望有帮助!