web-dev-qa-db-fra.com

Flutter (Dart): exceptions provoquées par le rendu / RenderFlex débordé

J'ai un problème avec Flutter (Dart) RenderFlex pixels débordés. Une exception de bibliothèque de rendu.

Comment puis-je gérer ou appliquer la fonction de défilement à la page de mon application et éviter les exceptions de rendu de Flutter avec des messages comme:

Un RenderFlex débordait de 28 pixels en bas.

si par hasard vous avez besoin du journal complet pour m'aider, c'est ici:

enter image description here

sur le rechargement à chaud, il apparaît avec les rayures jaunes/noires en bas selon le message.

Est-ce quelque chose que je peux gérer avec un widget déroulant? Ou puis-je déclarer autrement mes widgets afin de le contrôler?

code complet si nécessaire (j'ai changé les données de texte mais je suppose que les textes apparaissant sont plus longs que la taille de l'écran, et donc l'erreur se produit):

   @override
  Widget build(BuildContext context) {
    return new DefaultTabController(
        length: 3,
        child: new Scaffold(
          appBar: new AppBar(
            bottom: new TabBar(
              tabs: [
                new Tab(text: "xxx",),
                new Tab(text: "xxx",),
                new Tab(text: "xxx",),
              ],
            ),
            title: new Text(data["xxx"]),
          ),
          body: new TabBarView(
            children: [
              new Column(
                children: <Widget>[
                  new Text(data["xxx"],
                        style: new TextStyle(
                              fontStyle: FontStyle.italic,
                              color: Colors.blue,
                              fontSize: 16.0
                        ),),
                  new Text(data["xxx"],
                        style: new TextStyle(
                              fontStyle: FontStyle.italic,
                              color: Colors.blue,
                              fontSize: 10.0
                        ),),
                  new Text(data["xxx"],
                        style: new TextStyle(
                              fontStyle: FontStyle.italic,
                              color: Colors.blue,
                              fontSize: 16.0
                        ),),
                  new Text(data["xxx"],
                        style: new TextStyle(
                              fontStyle: FontStyle.italic,
                              color: Colors.blue,
                              fontSize: 8.0
                        ),
                      ),
                  new Text(data["xxx"],
                        style: new TextStyle(
                              fontStyle: FontStyle.italic,
                              color: Colors.blue,
                              fontSize: 8.0
                        ),),

                  new Row(
                    children: <Widget>[
                      new Expanded(
                        child: new Text("xxx"),
                      ),
                      new Expanded(
                        child: new Icon(Icons.file_download, color: Colors.green, size: 30.0,),
                      ),
                    ],
                  ),

                  new Divider(),
                  new Text("xxx", 
                            style: new TextStyle(
                              fontStyle: FontStyle.italic,
                              color: Colors.red,
                              fontSize: 16.0
                      ),
                  ),
                ],
              ),

              new ListView.builder(
                itemBuilder: (BuildContext context, int index) => new EntryItem(_lstTiles[index]),
                itemCount: _lstTiles.length,
              ),

              new Column(
                children: <Widget>[
                  new Text(data["xxx"], 
                            style: new TextStyle(
                              fontStyle: FontStyle.italic,
                              color: Colors.green[900],
                              fontSize: 16.0
                      ),
                  ),
                  new Text(data["xxx"], 
                            style: new TextStyle(
                              fontStyle: FontStyle.italic,
                              color: Colors.green[900],
                              fontSize: 16.0
                      ),),
                  new Text(data["xxx"]),
                  new ListTile(title: new Text("xxx")),
                  new Text(data["xxx"]),
                  new ListTile(title: new Text("xxx")),
                  new Divider(),
                  new Text("xxx", 
                            style: new TextStyle(
                              fontStyle: FontStyle.italic,
                              color: Colors.red,
                              fontSize: 16.0
                      ),
                  ),
                ],
              ),
            ],
          ),
        ),
      );
  }
9
oetoni

C'est un problème assez courant à rencontrer, surtout lorsque vous commencez à tester votre application sur plusieurs appareils et orientations. La galerie de widgets de Flutter a une section couvrant les différents widgets de défilement:

https://flutter.io/widgets/scrolling/

Je recommande soit d'envelopper tout votre contenu dans un SingleChildScrollView , soit d'utiliser un défilement ListView .

24
RedBrogdon