1
votes

Masquer / ignorer le clavier sur le défilement ListView dans l'application Flutter

J'ai une fenêtre de discussion dans l'application Flutter. Les messages sont présentés sous forme de widgets dans le widget ListView et j'ai également un widget pour la saisie de message attaché au bas de la fenêtre.

Je veux

masquer le clavier lorsque je fais défiler la ListView
faire défiler jusqu'au dernier message lorsqu'un nouveau est ajouté à partir de InputWidget

code:

class _MessagesPageState extends State<MessagesPage> {
  final ScrollController listScrollController = ScrollController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
    ....
    body: Stack(
        children: [
          ListView.builder(
              controller: listScrollController
              ....
          ),
          InputWidget()]
    );
}

class InputWidget extends StatelessWidget {

  final TextEditingController _textEditingController = TextEditingController();

....
Row (
  children: [
    TextField(
     controller: _textEditingController
    ), 
    IconButton(icon: ...., onPressed: (){})
  ]
 )}

flutter dart keyboard flutter-layout

0 commentaires

3 Réponses :

2
votes

En ce qui concerne le point 1 de votre question:

Vous pouvez créer une fonction d'écoute pour listScrollController contenant un appel à un FocusNode anonyme (idée tirée de cette réponse ), et quand un événement de défilement se produit, le focus sera être extrait de votre TextField et le clavier sera ignoré:

 class InputWidget extends StatelessWidget {

 InputWidget({Key key,this.controller}) : super(key: key);

 final ScrollController controller ;

 final TextEditingController _textEditingController = TextEditingController();

 ....
 Row (
  children: [
    TextField(
      controller: _textEditingController
    ), 
    IconButton(icon: ...., onPressed: (){
      controller.jumpTo(controller.position.maxScrollExtent);
    })
  ]
 )}

Point 2:

Vous remarquerez que j'ai modifié votre InputWidget pour prendre un ScrollController comme paramètre, afin que vous puissiez lui passer votre contrôleur ListView . et lorsque le IconButton est pressé, listScrollController sautera à la fin comme vous le souhaitez.

 class _MessagesPageState extends State<MessagesPage> {

 final ScrollController listScrollController = ScrollController();

 @override
 void initState() {
   listScrollController.addListener(_scrollListener);
   super.initState();
 }

 _scrollListener() {
   FocusScope.of(context).requestFocus(FocusNode());
 }

 @override
 Widget build(BuildContext context) {
   return Scaffold(
   ....
   body: Stack(
    children: [
      ListView.builder(
          controller: listScrollController
          ....
      ),
      InputWidget(controller: listScrollController)]
   );
}

6 commentaires

merci, il semble que cela fonctionne comme prévu! Je me suis maintenant rendu compte que lorsque le clavier est affiché, certains messages sont débordés par le clavier, je dois donc faire défiler ma ListView en conséquence?

Pas du tout ! au fait j'ai testé le code avant de poster.

Pouvez-vous recommander quelque chose pour question en commentaire?

quel genre de débordement? peux-tu expliquer ?

Certains messages qui ont été vus sans clavier sont désormais masqués derrière le clavier affiché. Donc, quand le clavier apparaît, je dois déplacer les messages vers le haut

Vous pouvez vous référer à cette solution pour modifier votre ListView stackoverflow.com/questions/53586892/...

3
votes

c'est facile..Suivez ces étapes ..

Remplacez la classe par StatefullWidget
créer final ScrollController listScrollController = ScrollController ();

ListView devrait ressembler à ceci:

     ListView.builder(
          controller: listScrollController,
          reverse: true,

Si vous utilisez l'ordre de modification de Firebase comme ceci:

.orderBy ('horodatage', décroissant: vrai)
Ajoutez ce code dans votre bouton Envoyer

listScrollController.animateTo (0.0, durée: Durée (millisecondes: 300), courbe: Curves.easeOut);

Faites défiler automatiquement votre textField, ajoutez votre textField et ListView à l'intérieur de Stack

0 commentaires

2
votes

Pour masquer le clavier lors du défilement de la liste, ajoutez simplement keyboardDismissBehavior . Exemple

ListView(
 keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.onDrag,
 children: [],
)

0 commentaires