Das vertikale Ansichtsfenster erhielt eine unbegrenzte Höhe

118

Das ist mein Code:

  @override
  Widget build(BuildContext context) {
    return new Material(
      color: Colors.deepPurpleAccent,
      child: new Column(
       mainAxisAlignment: MainAxisAlignment.center,
          children:<Widget>[new GridView.count(crossAxisCount: _column,children: new List.generate(_row*_column, (index) {
            return new Center(
                child: new CellWidget()
            );
          }),)]
      )
    );
  }

Ausnahme wie folgt:

I/flutter ( 9925): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter ( 9925): The following assertion was thrown during performResize():
I/flutter ( 9925): Vertical viewport was given unbounded height.
I/flutter ( 9925): Viewports expand in the scrolling direction to fill their container. In this case, a vertical
I/flutter ( 9925): viewport was given an unlimited amount of vertical space in which to expand. This situation
I/flutter ( 9925): typically happens when a scrollable widget is nested inside another scrollable widget.
I/flutter ( 9925): If this widget is always nested in a scrollable widget there is no need to use a viewport because
I/flutter ( 9925): there will always be enough vertical space for the children. In this case, consider using a Column
I/flutter ( 9925): instead. Otherwise, consider using the "shrinkWrap" property (or a ShrinkWrappingViewport) to size
I/flutter ( 9925): the height of the viewport to the sum of the heights of its children.
I/flutter ( 9925): 
I/flutter ( 9925): When the exception was thrown, this was the stack:
I/flutter ( 9925): #0      RenderViewport.performResize.<anonymous closure> (package:flutter/src/rendering/viewport.dart:827:15)
I/flutter ( 9925): #1      RenderViewport.performResize (package:flutter/src/rendering/viewport.dart:880:6)
I/flutter ( 9925): #2      RenderObject.layout (package:flutter/src/rendering/object.dart:1555:9)
Pallav Bohara
quelle
Sie können auch einfachen Container anstelle von Column verwenden (hauptsächlich für mehr als ein untergeordnetes Widget).
Napolean
Widget-Build (BuildContext-Kontext) {neues Material zurückgeben (Farbe: Colors.deepPurpleAccent, Kind: neuer Container (Ausrichtung: Alignment.center, Kind: neues GridView.count (crossAxisCount: _column, Kinder: neues List.generate (_row * _column, (index) {neues Zentrum zurückgeben (Kind: neues CellWidget ());})),)); - Dieser Code hilft auch nicht @ Napoleon
Pallav Bohara
Versuchen Sie, mainAxisSize unter Spalte zu max hinzuzufügen, und prüfen Sie, ob dies hilfreich ist.
pblead26
Schauen Sie sich das an, wenn es funktioniert, denn ich denke, es sollte getan werden: stackoverflow.com/a/61708887/10563627
Paresh Mangukiya

Antworten:

229

Hinzufügen dieser beiden Zeilen

ListView.builder(
    scrollDirection: Axis.vertical,
    shrinkWrap: true,
...
Blutverlust
quelle
8
Vielen Dank, nur ein kleiner Rat, Sie können die ListView von Flexible umgeben, um sie scrollbar zu machen
Shady Mohamed Sherif
3
Hier ist die Dokumentation für shrinkWrap api.flutter.dev/flutter/widgets/ScrollView/shrinkWrap.html
Omer Celik
155

Dies passiert im Allgemeinen, wenn Sie versuchen, ein ListView/ GridViewinnerhalb eines zu verwenden Column. Es gibt viele Möglichkeiten, es zu lösen. Ich liste hier nur einige auf.

  1. wickeln Sie ListViewinExpanded

    Column(
      children: <Widget>[
        Expanded( // wrap in Expanded
          child: ListView(...),
        ),
      ],
    )
    
  2. Wickeln Sie sich ListViewein SizedBoxund geben Sie eine Grenzeheight

    Column(
      children: <Widget>[
        SizedBox(
          height: 400, // fixed height
          child: ListView(...),
        ),
      ],
    )
    
  3. Verwenden Sie shrinkWrap: truein ListView.

    Column(
      children: <Widget>[
        ListView(
          shrinkWrap: true, // use this
        ),
      ],
    )
    
CopsOnRoad
quelle
5
Versuchte dies mit einer vertikalen Listenansicht, die eine horizontale Listenansicht enthält. Nur die Size-Box-Methode würde funktionieren, aber die Höhe ist zu genau. Wie macht man das sonst?
Fraktal
shrinkWrap: truehat den Job gemacht
Ali80
1
Das ist die Antwort.
Vishalknishad
Das habe ich gesucht. Gibt es eine Chance, die Vor- und Nachteile jeder Wahl hinzuzufügen?
Emragins
Das hat mir sehr geholfen. Danke @CopsOnRoad
Kobby Rabatt
30

Also haben alle Antworten gepostet, aber niemand wollte erklären, warum: Ich werde die Dokumentation kopieren über shrinkWrap:

Ob der Umfang der Bildlaufansicht in der [Bildlaufrichtung] durch den angezeigten Inhalt bestimmt werden soll.

Wenn die Bildlaufansicht den Umbruch nicht verkleinert, wird die Bildlaufansicht in der [Bildlaufrichtung] auf die maximal zulässige Größe erweitert. Wenn die Bildlaufansicht in [scrollDirection] unbegrenzte Einschränkungen aufweist, muss [shrinkWrap] wahr sein.

Das Schrumpfen des Inhalts der Bildlaufansicht ist erheblich teurer als das Erweitern auf die maximal zulässige Größe, da der Inhalt während des Bildlaufs erweitert und verkleinert werden kann. Dies bedeutet, dass die Größe der Bildlaufansicht neu berechnet werden muss, wenn sich die Bildlaufposition ändert.

Der Standardwert ist false.

Wenn man sich also das Vokabular der Dokumente ansieht, passiert hier, dass wir uns ListViewin einer Situation unbegrenzter Einschränkungen befinden (in die Richtung, in die wir scrollen), daher ListViewwird sich das beschweren:

... einem vertikalen Ansichtsfenster wurde unbegrenzt viel vertikaler Raum zum Erweitern eingeräumt.

Durch einfaches Setzen shrinkWrapauf truewird sichergestellt, dass die durch den Inhalt definierte Größe umbrochen wird. Ein Beispielcode zur Veranschaulichung:

// ...
  ListView(
    // Says to the `ListView` that it must wrap its
    // height (if it's vertical) and width (if it's horizontal).
    shrinkWrap: true,
  ),
// ...

Genau das passt zu Ihrem Code. Der Vorschlag von @ Rémi ist jedoch der beste für diesen Fall, wenn Sie Alignanstelle von a verwenden Column.

Guilherme Matuella
quelle
27

Platzieren Sie die Rasteransicht im flexiblen oder erweiterten Widget

return new Material(
    color: Colors.deepPurpleAccent,
    child: new Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children:<Widget>[
         Flexible(
          child:  GridView.count(crossAxisCount: _column,children: new List.generate(_row*_column, (index) {
          return new Center(
             child: new CellWidget(),
          );
        }),))]
    )
);
Manoj Kumar
quelle
1
Erweitert und shrinkWrap: truezu GridView hinzufügen .
Wilmer
13

Diese Situation tritt normalerweise auf, wenn ein scrollbares Widget in einem anderen scrollbaren Widget verschachtelt ist.

In meinem Fall verwende ich GridView innerhalb der Spalte und dieser Fehler löst aus.

Das GridView-Widget hat eine shrinkWrapEigenschaft / einen benannten Parameter. Um dies festzulegen, ist truemein Problem behoben.

GridView.count(
  shrinkWrap: true,
  // rest of code
)
Robin
quelle
9

Nicht Columnfür die Ausrichtung einzelner Kinder verwenden. Verwenden Sie Alignstattdessen.

    new Align(
      alignment: Alignment.topCenter,
      child: new GridView(),
    )
Rémi Rousselet
quelle
Es hat zwar meinen Fehler behoben, aber ich kann mein GridView nicht vertikal zentrieren. Es zeigt das gleiche wie zuvor. Versuchte alle Flaggen für die Ausrichtung. * Was fehlt mir?
Pallav Bohara
5

Obwohl shrinkWraptun , um die Sache, aber man kann nicht bewegen in ListView.

Wenn Sie eine Bildlauffunktion wünschen, können Sie folgende physicsEigenschaften hinzufügen :

ListView.builder(
    scrollDirection: Axis.vertical,
    shrinkWrap: true,
    physics: ScrollPhysics(),
...
Ali Radmanesh
quelle
3

Dies geschieht, weil das ListView/GridViewWidget kein übergeordnetes Element hat, um seine Größe zu übernehmen. Daher ist die Höhe unendlich und das Flattern kennt die Höhe der ListView nicht und kann nicht gerendert werden.

  1. Lösung eins: feste Höhe

    Wickeln Sie es direkt mit dem Containeroder ein SizedBox, um die Tothöhe zu schreiben.

    Column(
      children: <Widget>[
        SizedBox(
         height: 400, // fixed height
        child: ListView(...),
       ),
     ],
    )
    

Dies ist in Ordnung, aber wenn die Höhe anpassungsfähig sein muss, funktioniert es nicht, wenn Sie es schreiben.

  1. Lösung zwei: shrinkWrap: true

    Versuchen Sie es shrinkWrap: truemit physics: ScrollPhysics()zum Scrollen

    shrinkWrap: trueist ein bisschen wie bei Android wrap_content.

    ListView.builder(
       scrollDirection: Axis.vertical,
       shrinkWrap: true,
       physics: ScrollPhysics()
    ...
    

Nach dem Kompilieren finden Sie jedoch unten auf der Seite eine lange gelbe Warnung.

Also immer noch nicht

  1. Lösung drei: Erweitert oder flexibel

    Flexible Ist ein flexibles Layout im Flattern, das LinearLayout in Android entspricht.

    Es gibt eine in Flexible. flexDas Attribut, das layout_weight entspricht, nimmt den gesamten verbleibenden Speicherplatz ein.

    So können wir die ListView mit Flexible umschließen.

    Column(
      children: <Widget>[
        Expanded( 
          child: ListView(...),
        ),
      ],
    )
    

Diese Antwort basiert auf: Das vertikale Ansichtsfenster erhielt eine unbegrenzte Höhe.

Paresh Mangukiya
quelle
Alle von ihnen sind bereits in meiner Lösung Paresh behandelt. Ich hoffe, Sie haben etwas Neues hinzugefügt.
CopsOnRoad
Ja, ich weiß, aber ich habe versucht, diese Lösung zu erklären, auch wenn ich denke, ich sollte Sie als Kredit erwähnen
Paresh Mangukiya
1

Testen Sie diese für die zweite Listenansicht

ListView.builder(
            physics: NeverScrollableScrollPhysics(),
Mehrdad
quelle