web-dev-qa-db-fra.com

Flutter ListView.Builder () dans une colonne à défilement avec d'autres widgets

J'ai un TabBarView () avec un certain nombre de vues différentes. Je veux d'eux être une colonne avec un TextField en haut et un ListView.Builder () ci-dessous, mais les deux widgets doivent être dans la même zone de défilement (scrollview). La façon dont je l'ai implémenté a généré quelques erreurs:

@override
Widget build(BuildContext context) {
return new Column(
  mainAxisAlignment: MainAxisAlignment.center,
    mainAxisSize: MainAxisSize.max,
    children: <Widget>[
      new Padding(
          padding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
          child: new TextField(
            decoration: new InputDecoration(
                hintText: "Type in here!"
            ),
          )
      ),
      new ListView.builder(
          itemCount: _posts.length, itemBuilder: _postBuilder)
    ],
   );
}

Erreur:

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

J'ai lu des informations sur l'empilement de ListView.builder () dans une zone étendue, mais le champ de texte était en quelque sorte "collant", ce qui n'est pas ce que je veux. :-) 

J'ai aussi rencontré CustomScrollView mais je n'ai pas bien compris comment l'implémenter.

Merci d'avance!

listviewscrollviewflutter
5
aksn

Placer le ListView dans un widget Expanded devrait résoudre votre problème:

@override
Widget build(BuildContext context) {
return new Column(
  mainAxisAlignment: MainAxisAlignment.center,
    mainAxisSize: MainAxisSize.max,
    children: <Widget>[
      new Padding(
          padding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
          child: new TextField(
            decoration: new InputDecoration(
                hintText: "Type in here!"
            ),
          )
      ),
      new Expanded(child: ListView.builder(
          itemCount: _posts.length, itemBuilder: _postBuilder))
    ],
   );
}
14
Siavash

Column ne fait pas défiler, c'est pourquoi la TextField en haut ne défilerait pas mais la ListView en bas le ferait.

La meilleure façon de résoudre ce problème à mon avis est de faire de votre TextField le premier élément de votre ListView.

Ainsi, vous n'aurez pas besoin d'une colonne, votre widget parent est la ListView et ses enfants sont la TextField suivie des éléments restants que vous créez avec _postBuilder.

0
Edman