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)
flutter
flutter-layout
Pallav Bohara
quelle
quelle
Antworten:
Hinzufügen dieser beiden Zeilen
ListView.builder( scrollDirection: Axis.vertical, shrinkWrap: true, ...
quelle
shrinkWrap
api.flutter.dev/flutter/widgets/ScrollView/shrinkWrap.htmlDies passiert im Allgemeinen, wenn Sie versuchen, ein
ListView
/GridView
innerhalb eines zu verwendenColumn
. Es gibt viele Möglichkeiten, es zu lösen. Ich liste hier nur einige auf.wickeln Sie
ListView
inExpanded
Column( children: <Widget>[ Expanded( // wrap in Expanded child: ListView(...), ), ], )
Wickeln Sie sich
ListView
einSizedBox
und geben Sie eine Grenzeheight
Column( children: <Widget>[ SizedBox( height: 400, // fixed height child: ListView(...), ), ], )
Verwenden Sie
shrinkWrap: true
inListView
.Column( children: <Widget>[ ListView( shrinkWrap: true, // use this ), ], )
quelle
shrinkWrap: true
hat den Job gemachtAlso haben alle Antworten gepostet, aber niemand wollte erklären, warum: Ich werde die Dokumentation kopieren über
shrinkWrap
:Wenn man sich also das Vokabular der Dokumente ansieht, passiert hier, dass wir uns
ListView
in einer Situation unbegrenzter Einschränkungen befinden (in die Richtung, in die wir scrollen), daherListView
wird sich das beschweren:Durch einfaches Setzen
shrinkWrap
auftrue
wird 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
Align
anstelle von a verwendenColumn
.quelle
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(), ); }),))] ) );
quelle
shrinkWrap: true
zu GridView hinzufügen .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
shrinkWrap
Eigenschaft / einen benannten Parameter. Um dies festzulegen, isttrue
mein Problem behoben.GridView.count( shrinkWrap: true, // rest of code )
quelle
Nicht
Column
für die Ausrichtung einzelner Kinder verwenden. Verwenden SieAlign
stattdessen.new Align( alignment: Alignment.topCenter, child: new GridView(), )
quelle
Obwohl
shrinkWrap
tun , um die Sache, aber man kann nicht bewegen inListView
.Wenn Sie eine Bildlauffunktion wünschen, können Sie folgende
physics
Eigenschaften hinzufügen :ListView.builder( scrollDirection: Axis.vertical, shrinkWrap: true, physics: ScrollPhysics(), ...
quelle
Dies geschieht, weil das
ListView/GridView
Widget 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.Lösung eins: feste Höhe
Wickeln Sie es direkt mit dem
Container
oder einSizedBox
, 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.
Lösung zwei: shrinkWrap: true
Versuchen Sie es
shrinkWrap: true
mitphysics: ScrollPhysics()
zum ScrollenshrinkWrap: true
ist ein bisschen wie bei Androidwrap_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
Lösung drei: Erweitert oder flexibel
Flexible
Ist ein flexibles Layout im Flattern, das LinearLayout in Android entspricht.Es gibt eine in Flexible.
flex
Das Attribut, das layout_weight entspricht, nimmt den gesamten verbleibenden Speicherplatz ein.So können wir die ListView mit Flexible umschließen.
Diese Antwort basiert auf: Das vertikale Ansichtsfenster erhielt eine unbegrenzte Höhe.
quelle
Testen Sie diese für die zweite Listenansicht
quelle
Es gibt ein Widget namens Center. Es soll Ihnen helfen, das zu erreichen, was Sie tun möchten (vertikal zentrieren). Offizielle Dokumentation für das Center-Widget
quelle