Flutter LIstView ne défile pas lors de l'utilisation de film rétractable

Question

Je développe une nouvelle application Flutter sur Android studio. Une page de mon application obtient les informations d'un futur. Avec le résultat du futur, je crée un listview.builder:

Voici le code:

Widget encabezados(BuildContext context, AsyncSnapshot snapshot)
  {
    ListView(
      children: <Widget>[
        new Card(
          elevation: 3,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              SizedBox(width: 0.0,),
              Category(
                backgroundColor: Colors.deepOrange,
                val: clientesacobrar.toString(),
                title: "Clientes a cobrar",
              ),
              SizedBox(width: 10.0,),
              Category(
                backgroundColor: Colors.blue,
                title: "Clientes cobrados",
                val: clientescobrados.toString(),
              ),
              SizedBox(width: 10.0,),
              Category(
                val: formatter.format(montoacobrar),
                //val: records.length.toString(),
                backgroundColor: Colors.green,
                title: "Monto a cobrar",
              )
            ],
          ),
        ),
        new ListView(
          shrinkWrap: true,
          scrollDirection: Axis.vertical,

          //elevation: 3,
            children: <Widget>[
              ListView.builder(

                  scrollDirection: Axis.vertical,
                  shrinkWrap: true,
                  //ShrinkWrappingViewport: true,
                  itemCount: records.length,
                  itemBuilder: (BuildContext context, int index) {
                    return records.isNotEmpty
                        ? Card(
                        child: Padding (
                          padding: const EdgeInsets.all(16.00),
                          child: Text(records[index].nombre),
                        )
                    )
                        : CircularProgressIndicator();
                  }
              )
            ],
        )
      ],
    );


  }

Comme vous pouvez le voir dans les widgets listviews, j'utilise shrinkWrap défini sur true, car si je ne le configure pas, j'obtiens:

I/flutter (22634): The following assertion was thrown during performResize():
I/flutter (22634): Vertical viewport was given unbounded height.
I/flutter (22634): Viewports expand in the scrolling direction to fill their container.In this case, a vertical
I/flutter (22634): viewport was given an unlimited amount of vertical space in which to expand. This situation
I/flutter (22634): typically happens when a scrollable widget is nested inside another scrollable widget.
I/flutter (22634): If this widget is always nested in a scrollable widget there is no need to use a viewport because
I/flutter (22634): there will always be enough vertical space for the children. In this case, consider using a Column
I/flutter (22634): instead. Otherwise, consider using the "shrinkWrap" property (or a ShrinkWrappingViewport) to size
I/flutter (22634): the height of the viewport to the sum of the heights of its children.

Mais si je définit la propriété de film rétractable, je ne suis pas en mesure de faire défiler la page sur mon application

J'ai essayé de mettre le listview.builder dans: widget conteneur, widget colonne, widget Listview

mais dans le listview.builder, on me demande toujours de définir la propriété shrinkwrap.

Answer 1

Donc, quelque chose qui semble étrange est le fait que vous avez tout un tas de ListView imbriqués. Je suggère d'essayer de le limiter à un seul.

Il est un peu difficile de voir quel devrait être le résultat escompté ... La "fiche Catégorie" est-elle censée être statique avec le ListView.builder partie défilant en dessous? Ou la "fiche Catégorie" défile-t-elle avec le contenu?

Quoi qu'il en soit, je pense que j'ai quelque chose que vous devriez pouvoir utiliser. Sont inclus les moyens d'accomplir la tête statique ou la tête de défilement.

Remarque sur la solution d'en-tête statique: j'utilise un Column au lieu d'un ListView Cela garantit que nous n'avons pas de défilement de niveau supérieur. Le premier enfant est votre "en-tête" avec le deuxième enfant le ListView responsable du défilement. Ce ListView est enveloppé dans Expanded pour vous assurer que le défilement ListView occupe toute la hauteur d'écran restante.

J'espère que cela t'aides

import 'package:flutter/material.Dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'SO Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Sample Code'),
        ),
        body: _buildViewWithStaticCategories());
        // OR
    // body: _buildViewWithScrollingCategories());
  }

  Widget _buildViewWithStaticCategories() {
    return Column(
      children: <Widget>[
        _buildCategoriesCard(),
        Expanded(
          child: ListView.builder(
              itemCount: 20, // records.length
              itemBuilder: (BuildContext context, int index) {
                return Card(
                  child: Padding(
                    padding: const EdgeInsets.all(16.00),
                    child: Text(index.toString()),
                  ),
                );
              }),
        ),
      ],
    );
  }

  Widget _buildViewWithScrollingCategories() {
    return ListView.builder(
      itemCount: 21, // records.length + 1 for the Categories card
      itemBuilder: (BuildContext context, int index) {
        return index == 0
            ? _buildCategoriesCard()
            : Card(
                child: Padding(
                  padding: const EdgeInsets.all(16.00),
                  child: Text(index.toString()),
                ),
              );
      },
    );
  }

  Widget _buildCategoriesCard() {
    return Card(
      elevation: 3,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text('one'), // Category( ...
          SizedBox(width: 10.0),
          Text('two'), // Category( ...
          SizedBox(width: 10.0),
          Text('three'), // Category( ...
        ],
      ),
    );
  }
}