Rzutnia pionowa otrzymała nieograniczoną wysokość

132

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)
pallav bohara
źródło
możesz także użyć prostego kontenera zamiast kolumny (głównie dla więcej niż jednego widżetu podrzędnego).
Napolean
Kompilacja widżetu (kontekst BuildContext) {return new Material (color: Colors.deepPurpleAccent, child: new Container (alignment: Alignment.center, child: new GridView.count (crossAxisCount: _column, children: new List.generate (_row * _column, (index) {return new Center (child: new CellWidget ());})),)); - Ten kod również nie pomaga @Napolean
pallav bohara
spróbuj dodać mainAxisSize do max w kolumnie Column i zobacz, czy to pomaga.
pblead26
Spójrz na to, czy działa, bo myślę, że powinno być zrobione: stackoverflow.com/a/61708887/10563627
Paresh Mangukiya

Odpowiedzi:

263

Dodanie tych dwóch wierszy

ListView.builder(
    scrollDirection: Axis.vertical,
    shrinkWrap: true,
...
Strata krwi
źródło
8
Dzięki, tylko mała rada, którą możesz otoczyć ListView przez Flexible, aby można go było przewijać
Shady Mohamed Sherif
3
Oto dokumentacja dla shrinkWrap api.flutter.dev/flutter/widgets/ScrollView/shrinkWrap.html
Omer Celik
165

Zwykle dzieje się tak, gdy próbujesz użyć ListView/ GridViewwewnątrz a Column, istnieje wiele sposobów rozwiązania tego problemu, wymieniam kilka tutaj.

  1. owinąć ListViewwExpanded

    Column(
      children: <Widget>[
        Expanded( // wrap in Expanded
          child: ListView(...),
        ),
      ],
    )
    
  2. Wrap ListVieww SizedBoxi dać ograniczonymheight

    Column(
      children: <Widget>[
        SizedBox(
          height: 400, // fixed height
          child: ListView(...),
        ),
      ],
    )
    
  3. Użyj shrinkWrap: truew ListView.

    Column(
      children: <Widget>[
        ListView(
          shrinkWrap: true, // use this
        ),
      ],
    )
    
CopsOnRoad
źródło
5
Próbowałem z pionowym widokiem listy zawierającym poziomy widok listy. Tylko metoda sizebox zadziałałaby, ale jej wysokość jest zbyt nakazowa. Jak inaczej to zrobić?
fraktal
1
shrinkWrap: truewykonał robotę
Ali80
1
To jest odpowiedź.
vishalknishad
To jest to, czego szukałem. Czy możesz dodać zalety i wady każdego wyboru?
emragins
To mi bardzo pomogło. Dzięki @CopsOnRoad
Rabat Kobby
34

Tak więc wszyscy opublikowali odpowiedzi, ale nikt nie chciał wyjaśnić, dlaczego: skopiuję dokumentację na temat shrinkWrap:

Czy zakres widoku przewijania w [scrollDirection] powinien być określony przez przeglądaną zawartość.

Jeśli widok przewijania nie zmniejsza zawijania, widok przewijania rozszerzy się do maksymalnego dozwolonego rozmiaru w [scrollDirection]. Jeśli widok przewijania ma nieograniczone ograniczenia w [scrollDirection], to [shrinkWrap] musi mieć wartość true.

Obkurczanie zawartości widoku przewijania jest znacznie droższe niż rozszerzanie do maksymalnego dozwolonego rozmiaru, ponieważ zawartość może się rozszerzać i kurczyć podczas przewijania, co oznacza, że ​​rozmiar widoku przewijania należy ponownie obliczyć za każdym razem, gdy zmienia się pozycja przewijania.

Domyślnie false.

A więc biorąc pod uwagę słownictwo dokumentów, toListView , co się tutaj dzieje, to sytuacja, w której mamy nieograniczone ograniczenia (w kierunku, w którym przewijamy), więc ListViewbędzie narzekać, że:

... rzutnia pionowa otrzymała nieograniczoną ilość miejsca na rozszerzenie w pionie.

Po prostu ustawiając shrinkWrapna, trueupewnisz 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 Alignzamiast a Column.

Guilherme Matuella
źródło
28

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(),
          );
        }),))]
    )
);
Manoj Kumar
źródło
1
Rozwinięto i dodano shrinkWrap: truedo GridView.
Wilmer
14

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 shrinkWrapparametr właściwości / nazwany, aby go ustawić, truemój problem został rozwiązany.

GridView.count(
  shrinkWrap: true,
  // rest of code
)
Rudzik
źródło
10

Nie używaj Columndo wyrównywania jednego dziecka. Użyj Alignzamiast tego.

    new Align(
      alignment: Alignment.topCenter,
      child: new GridView(),
    )
Rémi Rousselet
źródło
To chociaż rozwiązało mój błąd, ale nadal nie jestem w stanie wyśrodkować widoku GridView w pionie. Pokazuje to samo co poprzednio. Wypróbowałem wszystkie flagi dla wyrównania. * Czego mi brakuje?
pallav bohara
6

Chociaż shrinkWrapzrób to, ale nie możesz przewijać ListView.

Jeśli potrzebujesz funkcji przewijania, możesz dodać physicswłaściwość:

ListView.builder(
    scrollDirection: Axis.vertical,
    shrinkWrap: true,
    physics: ScrollPhysics(),
...
Ali Radmanesh
źródło
5

Ta odpowiedź jest oparta na północy @CopsOnRoad

Dzieje się tak, ponieważ ListView/GridViewwidget 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ć.

  1. Rozwiązanie pierwsze: stała wysokość

    Zawiń go bezpośrednio za pomocą Containerlub, SizedBoxaby 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.

  1. Rozwiązanie drugie: shrinkWrap: true

    Spróbuj shrinkWrap: truez physics: ScrollPhysics()przewijaniem

    shrinkWrap: truejest trochę jak w Androidzie wrap_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ę

  1. Rozwiązanie trzecie: rozszerzone lub elastyczne

    Flexible Jest elastycznym układem we flutter, odpowiednikiem LinearLayout w systemie Android.

    Jest jeden w Elastyczny flexAtrybut, równy ciężar_układu, zajmuje całe pozostałe miejsce.

    Więc możemy zawinąć ListView elastycznym.

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

Ta odpowiedź opiera się na: rzutni pionowej dano nieograniczoną wysokość.

Paresh Mangukiya
źródło
Wszystkie z nich są już objęte moim rozwiązaniem Paresh. Mam nadzieję, że dodałeś coś nowego.
CopsOnRoad
Tak, wiem, ale próbowałem wyjaśnić to rozwiązanie, nawet myślę, że powinienem wspomnieć o tobie jako
uznaniu
1

przetestuj ten dla drugiego widoku listy

ListView.builder(
            physics: NeverScrollableScrollPhysics(),
Mehrdad
źródło