如何使用flutter_flux从Store更改TextField文本？

Question

在我们提交新消息的flutter_flux example中，_currentMessage被清空但TextField没有反映出这种变化。

这是商店中的代码：

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

该视图使用TextEditingController作为TextField Widget的控制器，因此我理解为什么它没有更新。

我们如何用flutter_flux从商店中清空TextField？

Answer 1

编辑：flutter_flux示例已更新，因为我发布了这个答案，它现在正确丢弃TextField中的消息，但更好的方式。你应该检查一下。

---

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

一般来说，当使用FooState时，通常在香草扑动中保持在Store中的状态值将进入flutter_flux。由于你通常会在TextEditingController中创建和保持State，我认为将它保持在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将负责文本值更改本身。

然后，可以删除msgController小部件中定义的ChatScreen，并相应地更新_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))
  ]);
}

希望这可以帮助。