web-dev-qa-db-fra.com

Comment faire flutter hauteur TextField correspondre au parent du conteneur?

Je veux que ma TextField hauteur soit la même que la hauteur de mon conteneur. Veuillez vérifier mon code ci-dessous et faites-moi savoir comment puis-je faire TextField match_parent de mon conteneur. J'ai vérifié cette question L'équivalent de wrap_content et match_parent dans flutter? mais je n'ai trouvé aucune solution. Je dois faire TextField pour prendre toute la hauteur et la largeur de mon conteneur.

 new Container(
            height: 200.0,
            decoration: new BoxDecoration(
                border: new Border.all(color: Colors.black)
            ),

            child: new SizedBox.expand(
              child: new TextField(
                maxLines: 2,
                style: new TextStyle(
                    fontSize: 16.0,
                   // height: 2.0,
                    color: Colors.black
                ),
                  decoration: const InputDecoration(
                    hintText: "There is no data",
                    contentPadding: const EdgeInsets.symmetric(vertical: 40.0),
                  )
              ),
            ),
          )

Veuillez vérifier la capture d'écran ci-dessous. Comme dit, j'ai besoin que mon TextField pour prendre toute la hauteur de Container

enter image description here

dartflutterflutter-layout
7
Ammy Kang

Voici ma solution:

Container(
            height: 200,
            color: Color(0xffeeeeee),
            padding: EdgeInsets.all(10.0),
            child: new ConstrainedBox(
              constraints: BoxConstraints(
                maxHeight: 200.0,
              ),
              child: new Scrollbar(
                child: new SingleChildScrollView(
                  scrollDirection: Axis.vertical,
                  reverse: true,
                  child: SizedBox(
                    height: 190.0,
                    child: new TextField(
                      maxLines: 100,
                      decoration: new InputDecoration(
                        border: InputBorder.none,
                        hintText: 'Add your text here',
                      ),
                    ),
                  ),
                ),
              ),
            ),
          ),

Cela fonctionne assez bien pour moi. Et voici une capture d'écran.

enter image description here

2
Jack Sun

Supprimons quelques lignes dans le code et comprenons comment fonctionne le flottement.

  1. Pourquoi nous donnons de la hauteur 200 à Conteneur . Le Container ne peut-il pas ajuster la hauteur en fonction de son enfant (dans ce cas SizedBox.expand)
  2. Si nous supprimons la hauteur 200, alors Container occupait tout l'écran à cause de SizedBox.expand
  3. Avons-nous vraiment besoin du SizedBox pour notre cas d'utilisation. Supprimons cela pour voir également ce qui se passe.
  4. Maintenant, notre Container enveloppe le TextField. Mais il y a un espace au-dessus et en dessous.
  5. Qui a décidé de cet espace? ContentPadding de la décoration de TextField. Supprimons cela également. Il ressemble à ci-dessous où textField enveloppé par Container. J'espère que c'est ce que vous voulez. Sinon, veuillez commenter, nous pouvons modifier un peu et obtenir ce que vous voulez. À votre santé enter image description here

Version finale du code qui affiche l'image ci-dessus

 new Container(
   //   height: 200.0,
      decoration: new BoxDecoration(
          border: new Border.all(color: Colors.black)
      ),

      child: new TextField(
          maxLines: 2,
          style: new TextStyle(
              fontSize: 16.0,
              // height: 2.0,
              color: Colors.black
          ),
          decoration: const InputDecoration(
            hintText: "There is no data",
//                contentPadding: const EdgeInsets.symmetric(vertical: 40.0),
          )
      ),
    )
1
Dinesh Balasubramanian