4
votes

Flutter - Comment quitter le champ de texte dans un champ de texte multiligne?

Je souhaite avoir un champ de texte multiligne où certaines données de paragraphe peuvent être renvoyées. J'ai changé le bouton «nouvelle ligne» en bouton «terminé» en utilisant la propriété textInputAction, et bien qu'il appelle onEditingComplete, il ne quitte toujours pas le champ de texte. Je sais que cela a quelque chose à voir avec la concentration, mais je ne suis pas en mesure de comprendre exactement comment le faire.

Voici mon code

TextField(
              onChanged: (text){
                print('On changed is called');
              },
              onEditingComplete: (){
                print('Editing is done ');
              },
              textInputAction: TextInputAction.done,
              maxLines: 6 ,

              controller: textEditingController,
              decoration: InputDecoration(
                  .....
              )
          ),

Comment puis-je me concentrer sur le fait d'appuyer sur terminé? Merci d'avance

flutter dart

1 commentaires

Si vous avez attribué un FocusNode au Textfield, à onSubmitted: utilisez myFocusNode.unfocus () mais, pour être honnête, c'est un peu bizarre, il devrait se déconcentrer quand "fait "est pressé.

4 Réponses :

0
votes

Rendez simplement maxLine: null comme indiqué ci-dessous

new TextFormField(
           controller: controller,
           obscureText: obscure,
           focusNode: _focusNode,
           maxLines: null,
           keyboardType: inputtype,
           onSaved: (String val) {
             text = val;
           },
           decoration: new InputDecoration(labelText: hintText,
               enabledBorder: OutlineInputBorder(borderSide: BorderSide(color: Colors.transparent)),
               focusedBorder: OutlineInputBorder(borderSide: BorderSide(color: Colors.transparent)),
               labelStyle: TextStyle(color: const Color(0xFF0C0738))),
         )

1 commentaires

L'ajout de maxLine aide à envelopper le texte, mais il ne revient pas et ne quitte pas le champ de texte lorsque vous appuyez sur Terminé

2
votes

Vous pouvez utiliser FocusNode pour contrôler la mise au point.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'MyApp',
      home: MyWidget(),
    );
  }
}
class MyWidget extends StatefulWidget {
  @override
  State<MyWidget> createState() {
    return _MyWidget();
  }
}
class _MyWidget extends State<MyWidget> {
  FocusNode _focusNode;

  @override
  void initState() {
    super.initState();
    _focusNode = FocusNode();
  }
  @override
  void dispose() {
    super.dispose();
    _focusNode.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: TextField(
          focusNode: _focusNode,
          maxLines: 8,
          autofocus:false ,
          textInputAction: TextInputAction.done,
          onEditingComplete: () {
            print("edit");
            _focusNode.unfocus();
          },
        ),
      )
    );
  }
}

3 commentaires

Salut .. J'ai essayé cela, mais cela ne fonctionne toujours pas! Il ne fait rien en cliquant sur le bouton Terminé

@Denise a mis à jour ma réponse pour afficher tout mon code qui fonctionne bien sur ma machine (iPhone Simulator). Veuillez vérifier la différence entre celui-ci et le vôtre.

Merci ... j'ai compris mon erreur ... Je n'avais pas écrit correctement la fonction initState et la variable _focusnode s'est imbriquée dans une autre fonction. Cette solution a bien fonctionné grâce

0
votes

L'avez-vous essayé avec la méthode onSubmitted: ?

TextField(
  focusNode: myFocus,
  onSubmitted: (text) {
    myFocus.unfocus();
  },
),

1 commentaires

Salut .. j'ai essayé cela cependant quand j'essaye ceci, le clavier tape sans que le champ de texte ne soit au point du tout .. et puis le clavier ne revient pas

0
votes

La réponse acceptée pose un problème. Il exige que vous utilisiez TextInputAction.done , ce qui limite sérieusement la fonctionnalité de TextFormField multiligne. Une solution simple consiste à utiliser un focusNode avec un bascule . La bascule est activée lorsque le champ du formulaire obtient le focus.

En supposant que les éléments de niveau supérieur sont des enfants de la même colonne, quelque chose comme ci-dessous suffirait

Row(
  mainAxisAlignment: MainAxisAlignment.end,
  children: <Widget>[
    focusNode.hasFocus
        ? FlatButton(
            color: Colors.green,
            child: Row(
              children: <Widget>[
                FaIcon(
                  Icons.done,
                  color: Colors.white,
                ),
                SizedBox(
                  width: 5.0,
                ),
                Text(
                  'Done',
                  style: Theme.of(context).textTheme.body1.copyWith(
                        fontWeight: FontWeight.w700,
                        color: Colors.white,
                      ),
                ),
              ],
            ),
            onPressed: () {
              setState(() {
                FocusScope.of(context).unfocus();
              });
            },
          )
        : Text(''),
  ],
),

Card(
  child: TextFormField(
    focusNode: focusNode, // The focusNode should be properly initiated and disposed
    controller: jobSpecificsController,
    maxLines: 3,
    keyboardType: TextInputType.text,
    textInputAction: TextInputAction.done,
    decoration: formElementDecoration.copyWith(hintText: 'Please enter the job details.'),
    onTap: () {
      setState(() {}); // Without this setState, you won't get the toggle in the iOS.
    },
  ),
),

0 commentaires