web-dev-qa-db-fra.com

Comment détecter TextField est sélectionné dans Flutter?

Stupid Flutter Newbie question ici ...

J'ai un Flutter TextField qui est couvert par le clavier logiciel lorsque le champ est sélectionné. Je dois faire défiler le champ vers le haut et à l'écart lorsque le clavier est affiché. Ceci est un problème assez courant et une solution est présentée dans cet article StackOverflow post .

Je pense avoir compris la partie ScrollController, mais comment puis-je détecter le moment où TextField a été sélectionné? Il ne semble pas y avoir de méthode d'événement (par exemple, onFocus (), onSelected (), onTap (), etc.).

J'ai essayé d'emballer le TextField dans un GestureDetector mais cela n'a pas fonctionné non plus - apparemment, l'événement n'a jamais été capturé.

new GestureDetector(
  child: new TextField(
    decoration: const InputDecoration(labelText: 'City'),
  ),
  onTap: () => print('Text Selected'),
),

C’est une exigence tellement fondamentale que je sais qu’il doit exister une solution simple.

Merci pour l'aide.

keyboardtextfieldflutter
7
user2785693

Je suppose que vous recherchez FocusNode .

Pour écouter le changement de focus, vous pouvez ajouter un listner à la variable FocusNode et spécifier la variable focusNode à TextField.

Exemple:

class TextFieldFocus extends StatefulWidget {
  @override
  _TextFieldFocusState createState() => new _TextFieldFocusState();
}

class _TextFieldFocusState extends State<TextFieldFocus> {
  FocusNode _focus = new FocusNode();

  TextEditingController _controller = new TextEditingController();

  @override
  void initState() {
    super.initState();
    _focus.addListener(_onFocusChange);
  }

  void _onFocusChange(){
    debugPrint("Focus: "+_focus.hasFocus.toString());
  }

  @override
  Widget build(BuildContext context) {
    return new Container(
      color: Colors.white,
      child: new TextField(
        focusNode: _focus,
      ),
    );
  }
}

This Gist indique comment faire en sorte qu'un nœud concentré soit visible sur l'interface utilisateur.

J'espère que ça aide!

16
Hemanth Raj

La solution la plus simple et la plus simple consiste à ajouter la méthode onTap sur TextField.

TextField(
  onTap: () {
    print('Editing stated $widget');
  },
)
1
Ankur Prakash