수직 뷰포트의 높이가 제한되지 않았습니다.


133

이것은 내 코드입니다.

  @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()
            );
          }),)]
      )
    );
  }

다음과 같은 예외 :

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)

Column 대신 간단한 Container를 사용할 수도 있습니다 (주로 하나 이상의 하위 위젯에 대해).
Napolean

Widget build (BuildContext context) {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 ());})),)); --This 코드는 @Napolean하는 데 도움이되지 않습니다
pallav의 bohara

Column 아래의 max에 mainAxisSize를 추가하고 도움이되는지 확인하십시오.
pblead26

이것이 작동한다면 이것을보십시오. 왜냐하면 그것이 완료되어야한다고 생각하기 때문입니다 : stackoverflow.com/a/61708887/10563627
Paresh Mangukiya

답변:



165

당신이 사용하려고 할 때 일반적으로 발생 ListView/ GridView내부를 Column, 그것을 해결하는 여러 가지 방법이 있습니다, 여기 몇 가지 나열하고있다.

  1. ListView에서Expanded

    Column(
      children: <Widget>[
        Expanded( // wrap in Expanded
          child: ListView(...),
        ),
      ],
    )
    
  2. Wrap ListView in SizedBox and give a bounded height

    Column(
      children: <Widget>[
        SizedBox(
          height: 400, // fixed height
          child: ListView(...),
        ),
      ],
    )
    
  3. Use shrinkWrap: true in ListView.

    Column(
      children: <Widget>[
        ListView(
          shrinkWrap: true, // use this
        ),
      ],
    )
    

5
Tried this with a vertical listview containing a horizontal listview. Only the sizedbox method would work but its too prescriptive on the height. How else to do this?
fractal

1
shrinkWrap: true did the job
Ali80

1
This is the answer.
vishalknishad

This is what I was looking for. Any chance you can add the pros and cons of each choice?
emragins

This helped me greatly. Thanks @CopsOnRoad
Kobby Discount

34

So, everyone posted answers but no one cared to explain why: I'll copy the documentation about shrinkWrap:

Whether the extent of the scroll view in the [scrollDirection] should be determined by the contents being viewed.

If the scroll view does not shrink wrap, then the scroll view will expand to the maximum allowed size in the [scrollDirection]. If the scroll view has unbounded constraints in the [scrollDirection], then [shrinkWrap] must be true.

Shrink wrapping the content of the scroll view is significantly more expensive than expanding to the maximum allowed size because the content can expand and contract during scrolling, which means the size of the scroll view needs to be recomputed whenever the scroll position changes.

Defaults to false.

So, taking the vocabulary of the docs, what's happening here is that our ListView is in a situation of unbounded constraints (in the direction that we are scrolling), thus the ListView will complain that:

... a vertical viewport was given an unlimited amount of vertical space in which to expand.

By simply setting shrinkWrap to true will make sure that it wraps its size defined by the contents. A sample code to illustrate:

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

That's what is going with your code, nonetheless, @Rémi suggestion is the best for this case, using Align instead of a Column.


28

put grid view inside Flexible or Expanded 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(),
          );
        }),))]
    )
);

1
Expanded and add shrinkWrap: true to GridView.
Wilmer

14

This situation typically happens when a scrollable widget is nested inside another scrollable widget.

In my case i use GridView inside of Column and that error throws.

GridView widget has shrinkWrap property/named parameter, to set it true my problem is fixed.

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

10

Don't use Column for single child alignment. Use Align instead.

    new Align(
      alignment: Alignment.topCenter,
      child: new GridView(),
    )

It though solved my error but still, I am not able to center my GridView vertically. It shows same as before. Tried all flags for Alignment.* What I am missing?
pallav bohara

7

Although shrinkWrap do the thing, but you can't scroll in ListView.

If you want scrolling functionality, you can add physics property:

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

5

This answer is based on the north of the @CopsOnRoad

This happens because the ListView/GridView widget has no parent to take its size , so its height is infinite and is the flutter does not know the height of the ListView and cannot render.

  1. Solution one: fixed height

    Wrap it up directly with the Container or SizedBox to write the dead height.

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

This is fine, but if the height needs to be adaptive, it will not work if you write it.

  1. Solution two: shrinkWrap: true

    Try shrinkWrap: true with physics: ScrollPhysics() for scrolling

    shrinkWrap: true is a bit like in android's wrap_content.

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

However, after compiling, you will find a long yellow warning at the bottom of the page.

So still can't

  1. Solution three: Expanded or Flexible

    Flexible Is a flexible layout in flutter, equivalent to LinearLayout in android.

    There is one in Flexible flex The attribute, equal to layout_weight, takes up all the remaining space.

    So, we can wrap the ListView with Flexible.

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

This answer based :Vertical viewport was given unbounded height.


All of them are already covered in my solution Paresh. I hope you'd added something new.
CopsOnRoad

Yes I know, but I have tried to explain that solution even i think also i should mention you as a credit
Paresh Mangukiya

1

test this one for second listview

ListView.builder(
            physics: NeverScrollableScrollPhysics(),

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.