flutter - 在 flutter 中实现上下文感知图标按钮时遇到问题

Question

我有一个 TextField 和一个 IconButton，就像这样。

我希望仅当 TextField 中有文本时才启用 IconButton。我正在使用 provider package用于状态管理。

这是 ChangeNotifier 的实现。

class ChatMessagesProvider with ChangeNotifier{

List<ChatMessage> chatMessages = <ChatMessage>[];
bool messageTyped = false;

ChatMessagesProvider(this.chatMessages);

void newMessage(String textMessage){

ChatMessage message = ChatMessage(textMessage);

this.chatMessages.add(message);
notifyListeners();
}

int messageCount() => chatMessages.length;

void updateMessageTyped(bool typed){
this.messageTyped = typed;
//    notifyListeners(); Un-comennting this makes the Text disappear everytime I type something on the text field
}

}

这是实际的小部件:

class TextCompose extends StatelessWidget {

final TextEditingController _composeTextEditingController = new            TextEditingController();

TextCompose(this.chatMessagesProvider);

final ChatMessagesProvider chatMessagesProvider;

@override
Widget build(BuildContext context) {

return Container(
margin: const EdgeInsets.all(8.0),
child: Row(
children: <Widget>[
  Flexible(
    child: new TextField(
      controller: _composeTextEditingController,
      onSubmitted: (String text) {
        _onMessageSubmitted(text, context);
      },
      onChanged: (String text){
        if(text.length > 0){
          chatMessagesProvider.updateMessageTyped(true);
          print(text);
        }
        else{
          chatMessagesProvider.updateMessageTyped(false);
          print("No text typed");
        }
      },
      decoration: new InputDecoration.collapsed(
          hintText: "Enter message"
      ),
    ),
  ),
  new Container(
    margin: new EdgeInsets.all(8.0),
    child: new IconButton(
      color: Theme.of(context).accentColor,
        icon: new Icon(Icons.send),
      disabledColor: Colors.grey,
      onPressed:chatMessagesProvider.messageTyped // This dosen't work
       ? () => _onMessageSubmitted(_composeTextEditingController.text, context)
       : null,
    ),
  )
],
),
);
}

void _onMessageSubmitted(String text, BuildContext context){
if(chatMessagesProvider.messageTyped) { // This works fine. 
// clear the message compose text box
_composeTextEditingController.clear();

// add the message to provider.
chatMessagesProvider.newMessage(text);

// set the message typed to false
chatMessagesProvider.messageTyped = false;
}

我正在使用 ChatMessageProvider 中的 messageTyped 检查 TextField 中是否有任何文本。当我在 _onMessageSubmitted 方法中检查它时，它似乎工作正常，但当我在 IconButton 的 onPressed 属性中检查它的值时，它似乎工作正常。

我知道这一点是因为当我输入文本时我可以看到 IconButton 保持禁用状态(颜色不会从灰色改变)，而我可以点击虚拟键盘上的提交按钮并且文本从 TextField 中清除(根据调用 _composeTextEditingController.clear())

问题:

• 为什么 chatMessagesProvider.messageTyped 在从 _onMessageSubmitted 调用时返回正确的值，但在从 IconButton 中的 onPrssed 属性调用时返回正确的值？

• 我如何在 Flutter 中调试这样的东西，我真的很想在 onPressedAttribute 中放置一个断点并查看 chatMessagesProvider.messageTyped 的值

如果您需要查看我的更多代码，请告诉我。

Answer 1

onPressed:chatMessagesProvider.messageTyped 此行在小部件构建期间执行，因此它始终是默认值，除非您使用 notify listener 或有状态的小部件。

将 currently being typed message 存储在您的 provider 中，并启用/禁用您的发送按钮取决于 currently being typed message 是否为空还是不是。