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

Question

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

usernameController.text = '1234';

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

总的来说，我通过 Provider 管理状态。我可以在我的应用程序的其他地方设置和检索/显示状态，没有问题。问题变成了 Controller 是通过 initState() 中的 dart 代码设置的。它不是重建的小部件的一部分。

我可以在消费者中设置 TextField 小部件。当子页面中的状态更新(通过调试打印语句确认)时，构建器被调用，但小部件本身不反射(reflect)状态的新值(它仍然具有旧用户名，并且没有被清空)。

                            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;

但这似乎不起作用。

似乎这个“非纯”小部件(因为 Controller 以编程方式处理)在想要重绘小部件的消费者模型中并不漂亮。

有人有什么想法吗？

谢谢!

Answer 1

一种可能的方法是在构建器中检查状态和 Controller 中的值是否匹配并同步它们。

例子:

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),
        ),
      ),
    );
  },
)

希望有帮助!