To jest mój kod:
@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()
);
}),)]
)
);
}
Wyjątek następujący:
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
dart
flutter-layout
height
flutter-widget
pallav bohara
źródło
źródło
Odpowiedzi:
Dodanie tych dwóch wierszy
ListView.builder( scrollDirection: Axis.vertical, shrinkWrap: true, ...
źródło
shrinkWrap
api.flutter.dev/flutter/widgets/ScrollView/shrinkWrap.htmlZwykle dzieje się tak, gdy próbujesz użyć
ListView
/GridView
wewnątrz aColumn
, istnieje wiele sposobów rozwiązania tego problemu, wymieniam kilka tutaj.owinąć
ListView
wExpanded
Column( children: <Widget>[ Expanded( // wrap in Expanded child: ListView(...), ), ], )
Wrap
ListView
wSizedBox
i dać ograniczonymheight
Column( children: <Widget>[ SizedBox( height: 400, // fixed height child: ListView(...), ), ], )
Użyj
shrinkWrap: true
wListView
.Column( children: <Widget>[ ListView( shrinkWrap: true, // use this ), ], )
źródło
shrinkWrap: true
wykonał robotęTak więc wszyscy opublikowali odpowiedzi, ale nikt nie chciał wyjaśnić, dlaczego: skopiuję dokumentację na temat
shrinkWrap
:A więc biorąc pod uwagę słownictwo dokumentów, to
ListView
, co się tutaj dzieje, to sytuacja, w której mamy nieograniczone ograniczenia (w kierunku, w którym przewijamy), więcListView
będzie narzekać, że:Po prostu ustawiając
shrinkWrap
na,true
upewnisz się, że zawija rozmiar zdefiniowany przez zawartość. Przykładowy kod do zilustrowania:// ... ListView( // Says to the `ListView` that it must wrap its // height (if it's vertical) and width (if it's horizontal). shrinkWrap: true, ), // ...
Tak jest z twoim kodem, niemniej jednak sugestia @ Rémi jest najlepsza w tym przypadku, używając
Align
zamiast aColumn
.źródło
umieść widok siatki w widżecie elastycznym lub rozszerzonym
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(), ); }),))] ) );
źródło
shrinkWrap: true
do GridView.Taka sytuacja ma zwykle miejsce, gdy przewijalny widżet jest zagnieżdżony w innym przewijalnym widżecie.
W moim przypadku używam GridView wewnątrz kolumny i zgłasza ten błąd.
Widżet GridView ma
shrinkWrap
parametr właściwości / nazwany, aby go ustawić,true
mój problem został rozwiązany.GridView.count( shrinkWrap: true, // rest of code )
źródło
Nie używaj
Column
do wyrównywania jednego dziecka. UżyjAlign
zamiast tego.new Align( alignment: Alignment.topCenter, child: new GridView(), )
źródło
Chociaż
shrinkWrap
zrób to, ale nie możesz przewijaćListView
.Jeśli potrzebujesz funkcji przewijania, możesz dodać
physics
właściwość:ListView.builder( scrollDirection: Axis.vertical, shrinkWrap: true, physics: ScrollPhysics(), ...
źródło
Ta odpowiedź jest oparta na północy @CopsOnRoad
Dzieje się tak, ponieważ
ListView/GridView
widget nie ma rodzica, który mógłby przyjąć jego rozmiar, więc jego wysokość jest nieskończona, a trzepotanie nie zna wysokości ListView i nie może renderować.Rozwiązanie pierwsze: stała wysokość
Zawiń go bezpośrednio za pomocą
Container
lub,SizedBox
aby zapisać martwą wysokość.Column( children: <Widget>[ SizedBox( height: 400, // fixed height child: ListView(...), ), ], )
To jest w porządku, ale jeśli wysokość musi być dostosowana, nie zadziała, jeśli to napiszesz.
Rozwiązanie drugie: shrinkWrap: true
Spróbuj
shrinkWrap: true
zphysics: ScrollPhysics()
przewijaniemshrinkWrap: true
jest trochę jak w Androidziewrap_content
.ListView.builder( scrollDirection: Axis.vertical, shrinkWrap: true, physics: ScrollPhysics() ...
Jednak po skompilowaniu na dole strony pojawi się długie żółte ostrzeżenie.
Więc nadal nie mogę
Rozwiązanie trzecie: rozszerzone lub elastyczne
Flexible
Jest elastycznym układem we flutter, odpowiednikiem LinearLayout w systemie Android.Jest jeden w Elastyczny
flex
Atrybut, równy ciężar_układu, zajmuje całe pozostałe miejsce.Więc możemy zawinąć ListView elastycznym.
Ta odpowiedź opiera się na: rzutni pionowej dano nieograniczoną wysokość.
źródło
przetestuj ten dla drugiego widoku listy
źródło
Jest widżet o nazwie Centrum. Powinien pomóc ci osiągnąć to, co chcesz zrobić (wyśrodkuj w pionie). Oficjalna dokumentacja widżetu Centrum
źródło