Je crée une application flottante dans laquelle l'utilisateur peut taper un message et appuyer sur le bouton d'envoi DANS LE CLAVIER pour envoyer le message. Le problème est que lorsque j'appuie sur le bouton d'envoi, le message est envoyé mais le clavier est automatiquement rejeté. Comment puis-je empêcher que cela se produise? Merci d'avance.
TextField(
autofocus: true,
keyboardType: TextInputType.multiline,
maxLines: null,
decoration: new InputDecoration.collapsed(
hintText: "Let's talk",
border: UnderlineInputBorder(
borderRadius: BorderRadius.circular(1),
),
),
textInputAction: TextInputAction.send,
onSubmitted: null,
)
4 Réponses :
SystemChannels.textInput.invokeMethod('TextInput.show');
on onSubmit method
le onSubmit appelle une méthode qui envoie le message dans le champ de texte
^ pas clair. cette réponse fonctionnera essayez avec dans un setState ou dans une méthode onSubmit faire une nouvelle requête
@BenjithKizhisseri n'existe pas de moyen d'empêcher le champ de texte de perdre le focus
mais alors je devrai appeler le focus sur le champ de texte chaque fois que j'appuie sur le bouton d'envoi
Cela a fonctionné pour moi: -
Commencez par créer un FocusNode et attribuez-le à votre champ de texte, procédez comme suit: -
Le FocusNode code > est un composant de longue durée alors initialisez-le dans la méthode initState : -
TextField(
focusNode: inputFieldNode,
onSubmitted: (String) => FocusScope.of(context).requestFocus(inputFieldNode),
)
N'oubliez pas de nettoyer le FocusNode code > dans la méthode dispose après la suppression du formulaire: -
@override
void dispose() {
inputFieldNode.dispose();
super.dispose();
}
Assignez le FocusNode au champ de texte et écrivez ce qui suit code dans onSubmitted::-
FocusNode inputFieldNode;
@override
void initState() {
super.initState();
inputFieldNode = FocusNode();
}
Maintenant, le champ de texte ne perdra pas le focus même après avoir appuyé sur le bouton d'envoi.
L'approche la plus propre serait d'utiliser onEditingComplete () avec TextEditingController au lieu de onSubmitted (text). Reportez-vous à l'exemple ci-dessous.
final _controller = TextEditingController();
TextField(
controller: _controller,
padding: EdgeInsets.all(8),
textInputAction: TextInputAction.send,
placeholder: 'Type your message',
onEditingComplete: (){
if (_controller.text.isEmpty) return;
sendMessage(_controller.text);
},
),
Le widget TextField a un paramètre juste à cet effet!
Alors que le rappel onSubmit peut être utilisé pour gérer la logique métier lorsque l'utilisateur Une fois terminé, il existe également une propriété appelée onEditingComplete , spécialement conçue pour gérer la logique liée au focus. Vous devriez donc utiliser les deux, pour une meilleure lisibilité du code.
Selon le docs :
L'implémentation par défaut de onEditingComplete exécute 2 différents comportements basés sur la situation:
Lorsqu'une action de fin est activée, telle que «terminé», «aller», «envoyer» ou "recherche", le contenu de l'utilisateur est soumis au responsable du traitement, puis la concentration est abandonnée.
Lorsqu'une action de non-achèvement est activée, comme "suivant" ou "précédent", le contenu de l'utilisateur est soumis au contrôleur, mais le focus n'est pas abandonné car les développeurs voudront peut-être immédiatement se concentrer sur un autre widget d'entrée dans onSubmitted.
Par conséquent, si vous n'aimez pas ce comportement, par exemple, "envoyer" est considéré comme une "action de fin" ici, donc dans une application de messagerie instantanée (chat), chaque fois que l'utilisateur envoie un court message , le clavier sera réduit. Mais si nous remplaçons le rappel onEditingComplete vers une fonction vide, cela arrêtera le comportement par défaut et ne masquera pas le clavier.
Exemple de code: p>
TextField(
controller: _controller,
onSubmitted: (value) {
sendMessage(text);
_controller.clear();
},
onEditingComplete: () {}, // do nothing
textInputAction: TextInputAction.send,
)
Démo:
Pour une explication complète et comparaison entre les rappels onSubmitted et onEditingComplete , consultez mon autre réponse ici a >.
Pourriez-vous partager le code pertinent avec nous?
@RobinReiter a changé la touche entrée du clavier en touche envoyer
textInputAction: TextInputAction.send