如何使用Flutter_flux从商店更改Textfield文本

Question

在flutter_flux示例中，当我们提交新消息时， _currentMessage被清空，但 TextField并不能反映这种变化。

这是商店中的代码：

triggerOnAction(commitCurrentMessageAction, (ChatUser me) {
      final ChatMessage message =
          new ChatMessage(sender: me, text: _currentMessage);
      _messages.add(message);
      _currentMessage = '';
    });

视图使用TextEditingController作为TextField小部件的控制器，因此我了解为什么未更新它。

如何使用Flutter_flux将TextField从商店中清空？

Answer 1

编辑： 自从我发布此答案以来，flutter_flux示例已更新，现在它在TextField中正确丢弃了消息，但以更好的方式。您应该检查一下。

---

我认为正确的方法是将TextEditingController移至ChatMessageStore，而不是简单地将currentMessage放在该商店中。然后，您可以通过在TextEditingController上调用clear()来清空文本字段。

一般而言，使用flutter_flux时，通常将其保留在FooState中的状态值将进入Store。由于您通常会在State中创建并保留TextEditingController，因此我认为将其保留在Store中更自然。

更新的ChatMessageStore看起来像这样：

class ChatMessageStore extends Store {
  ChatMessageStore() {
    triggerOnAction(commitCurrentMessageAction, (ChatUser me) {
      final ChatMessage message =
          new ChatMessage(sender: me, text: currentMessage);
      _messages.add(message);
      _msgController.clear();
    });
  }
  final List<ChatMessage> _messages = <ChatMessage>[];
  final TextEditingController _msgController = new TextEditingController();
  List<ChatMessage> get messages =>
      new List<ChatMessage>.unmodifiable(_messages);
  TextEditingController get msgController => _msgController;
  String get currentMessage => _msgController.text;
  bool get isComposing => currentMessage.isNotEmpty;
}

请注意，我们不再需要setCurrentMessageAction，因为TextEditingController会照顾文本值本身。

然后，可以删除ChatScreen中定义的msgController，并且可以相应地更新_buildTextComposer。

Widget _buildTextComposer(BuildContext context, ChatMessageStore messageStore,
    ChatUserStore userStore) {
  final ValueChanged<String> commitMessage = (String _) {
    commitCurrentMessageAction(userStore.me);
  };
  ThemeData themeData = Theme.of(context);
  return new Row(children: <Widget>[
    new Flexible(
        child: new TextField(
            key: const Key("msgField"),
            controller: messageStore.msgController,
            decoration: const InputDecoration(hintText: 'Enter message'),
            onSubmitted: commitMessage)),
    new Container(
        margin: new EdgeInsets.symmetric(horizontal: 4.0),
        child: new IconButton(
            icon: new Icon(Icons.send),
            onPressed:
                messageStore.isComposing ? () => commitMessage(null) : null,
            color: messageStore.isComposing
                ? themeData.accentColor
                : themeData.disabledColor))
  ]);
}

希望这会有所帮助。