web-dev-qa-db-fra.com

Comment changer le bouton d'action de saisie de texte (touche retour / entrée) sur le clavier dans Flutter?

Dans Android et iOS il est possible de changer la touche entrée/retour du clavier à par exemple un bouton " Aller " (et d'autres options).

illustration

Sur en haut, nous pouvons voir le bouton régulier " Retour " sur les deux systèmes, qui est celui que vous obtenez par défaut avec aucune modification dans les deux Android & iOS natif et Flutter.

ci-dessous cela, il existe un autre paramètre, toujours sur les deux systèmes, que vous pouvez simplement ajuster dans votre application native. Il s'agit du bouton " Go " dans ce cas.

dartflutter
19
creativecreatorormaybenot

L'action d'entrée pour un TextField peut être spécifiée comme ceci (ici, le bouton Allez) :

TextField(
  textInputAction: TextInputAction.go
  ...
)

Liste de toutes les actions d'entrée disponibles.

26
creativecreatorormaybenot

Ce n'est actuellement pas possible. Bien que vous puissiez modifier les sources de flutter pour le rendre assez facile.

Les modifications suivantes sont les suivantes:

flutter/lib/src/widgets/editable_text.Dart

Changement _openInputConnection ligne ~ 430 à

void _openInputConnection() {
  if (!_hasInputConnection) {
    final TextEditingValue localValue = _value;
    _lastKnownRemoteTextEditingValue = localValue;
    _textInputConnection = TextInput.attach(this,
        new TextInputConfiguration(
            inputType: widget.keyboardType,
            obscureText: widget.obscureText,
            autocorrect: widget.autocorrect,
            inputAction: widget.keyboardType == TextInputType.multiline
                ? TextInputAction.newline
                : TextInputAction.done
        )
    )..setEditingState(localValue);
  }
  _textInputConnection.show();
}

Dans le même fichier, déclarez également un nouveau champ sur la classe EditableText (pas celle de l'état) ~ ligne 280

final TextInputAction textInputAction;

Et affectez-le dans le constructeur EditableText au-dessus de la ligne 164

this.textInputAction,

flutter/lib/src/material/text_field.Dart

Même histoire. Ajoutez un nouveau champ, mais à TextField à la place:

final TextInputAction textInputAction;

et ajoutez ce qui suit à son constructeur:

this.textInputAction,

Enfin, passez ce nouveau champ comme paramètre à EditableText ligne 479:

    textInputAction: widget.textInputAction,

Terminé.

Vous pouvez maintenant à l'intérieur de votre application spécifier un TextInputAction personnalisé. Cela ne cassera pas les TextField existants. Il ajoute simplement la possibilité de remplacer le comportement par défaut.

new TextField(
  keyboardType: TextInputType.text,
  textInputAction: TextInputAction.newline,
),
5
Rémi Rousselet