web-dev-qa-db-fra.com

Comment masquer le clavier de saisie logicielle lorsque vous cliquez en dehors de TextField / n’importe où sur l’écran?

Actuellement, je connais la méthode de masquage du clavier logiciel à l'aide de ce code, par onTap méthodes de n'importe quel widget.

FocusScope.of(context).requestFocus(new FocusNode());

Mais je veux masquer le clavier logiciel en cliquant en dehors de TextField ou n'importe où sur l'écran. Y at-il une méthode dans le flutter pour faire ceci??

dartflutter
19
Ammy Kang

Vous ne le faites pas correctement, essayez simplement cette méthode simple pour masquer le clavier virtuel. vous avez juste besoin de vous encapsuler tout votre écran dans la méthode GestureDetector et la méthode onTap écrire ce code.

        FocusScope.of(context).requestFocus(new FocusNode());

Voici l'exemple complet:

new Scaffold(

body: new GestureDetector(
  onTap: () {

    FocusScope.of(context).requestFocus(new FocusNode());
  },
child: new Container(
   //rest of your code write here
    )
 )
25
Daizy Arora

Envelopper l'écran entier dans GestureDetector comme

new Scaffold(

  body: new GestureDetector(
      onTap: () {
        // call this method here to hide soft keyboard
        FocusScope.of(context).requestFocus(new FocusNode());
      },
    child: new Container(
       -
       -
       -
        )
   )
16
user10147701

Mis à jour

À partir de début mai 2019, FocusNode a maintenant unfocus méthode:

Annule toutes les demandes de focus en suspens.

Cette méthode peut être appelée en toute sécurité, que ce nœud ait déjà demandé le focus ou non.

Utilisez unfocus si vous avez déclaré un FocusNode pour focaliser les champs de texte par programme:

final focusNode = FocusNode();

// ...

focusNode.unfocus();

Ma réponse initiale suggérait la méthode detach - utilisez-la uniquement si vous devez vous débarrasser complètement de votre FocusNode. Si vous envisagez de le garder, utilisez plutôt unfocus.

Si vous n'avez pas déclaré spécifiquement FocusNode, utilisez la méthode "conventionnelle":

FocusScope.of(context).requestFocus(new FocusNode());

Réponse originale

Je vois que tout le monde utilise FocusScope.of(context).requestFocus(new FocusNode()); pour annuler la mise au point d'un champ de texte, et cela me semble erroné.

IMO, il crée seulement un nouvel objet inutile qui reste en suspens jusqu'à ce que l'utilisateur appuie sur un champ de texte avec 'real' FocusNode.

Si vous recherchiez une méthode 'correcte' pour 1) supprimer le clavier 2) un champ de texte flou - j’aurais peut-être trouvé la bonne façon de procéder:

FocusScope.of(context).detach();

Documents officiels dit que detach est sûr à utiliser même s'il n'y a pas de nœud actif.

import 'package:flutter/services.Dart' show SystemChannels;

SystemChannels.textInput.invokeMethod('TextInput.hide');
9
George

J'ai ajouté cette ligne

behavior: HitTestBehavior.opaque,

gestureDetector et il semble fonctionner maintenant comme prévu.

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(AppLocalizations.of(context).calculatorAdvancedStageTitle),
      ),
      body: GestureDetector(
        behavior: HitTestBehavior.opaque,
        onTap: () {
          FocusScope.of(context).requestFocus(new FocusNode());
        },
        child: Padding(
          padding: const EdgeInsets.only(
            left: 14,
            top: 8,
            right: 14,
            bottom: 8,
          ),
          child: Text('Work'),
        ),
      )
    );
  }
4
atereshkov

À partir de la dernière version v1.7.8 + correctif.2 de Flutters, vous pouvez masquer le clavier à l’aide de unfocus () au lieu de requestfocus ()

FocusScope.of(context).unfocus()

donc chaque fois que vous appuyez sur le clavier partie du corps est caché

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text("Login"),
      ),
      body: GestureDetector(
        onTap: () {
          FocusScope.of(context).unfocus();
        },
        child: Container(...)
      ),
    );
  }
3
maheshmnj
GestureDetector(
  onTap: () {
        FocusScope.of(context).requestFocus(FocusNode());
  },
  behavior: HitTestBehavior.translucent,
  child: rootWidget
)
3
Vyacheslav
onPressed: () {
    FocusScope.of(context).unfocus();
},

Cela fonctionne pour moi.

0
Nixon Kosgei