Вертикальному огляду було надано необмежену висоту


132

Це мій код:

  @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)

ви також можете використовувати простий контейнер, а не стовпець (переважно для більше ніж одного дочірнього віджета.)
Наполеан

Віджет побудови (контекст BuildContext) {повернути новий матеріал (колір: Colors.deepPurpleAccent, дочірній: новий контейнер (вирівнювання: Alignment.center, дочірній: новий GridView.count (crossAxisCount: _column, дочірні: новий List.generate (_row * _column, (індекс) {return new Center (дочірній: new CellWidget ());})),)); - Цей код також не допомагає @Napolean
pallav bohara

спробуйте додати mainAxisSize до max під Стовпець і перевірте, чи це допомагає.
pblead26,

Подивіться на це , якщо це працює, тому що я думаю , що це має бути зроблено: stackoverflow.com/a/61708887/10563627
Paresh Mangukiya

Відповіді:



165

Зазвичай це трапляється, коли ви намагаєтесь використовувати a ListView/ GridViewinside a Column, існує безліч способів його вирішення, я перелічую тут декілька.

  1. загорніть ListViewвExpanded

    Column(
      children: <Widget>[
        Expanded( // wrap in Expanded
          child: ListView(...),
        ),
      ],
    )
    
  2. Wrap ListViewв SizedBoxі дають обмеженеheight

    Column(
      children: <Widget>[
        SizedBox(
          height: 400, // fixed height
          child: ListView(...),
        ),
      ],
    )
    
  3. Використовуйте shrinkWrap: trueв ListView.

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

5
Спробував це за допомогою вертикального перегляду списку, що містить горизонтальний перегляд списку. Працював би лише метод sizebox, але він занадто вказівний щодо висоти. Як ще це зробити?
фрактал

1
shrinkWrap: trueзробив роботу
Ali80

1
Це відповідь.
vishalknishad

Це те, що я шукав. Будь-який шанс ви можете додати плюси і мінуси кожного вибору?
emragins

Це мені дуже допомогло. Дякую @CopsOnRoad
знижка Kobby

34

Отже, всі розмістили відповіді, але ніхто не зацікавився пояснити, чому: я скопіюю документацію про shrinkWrap:

Чи слід визначати масштаб перегляду прокрутки у [scrollDirection] залежно від вмісту, який переглядається.

Якщо подання прокрутки не зменшує обтікання, тоді прокрутка розшириться до максимально дозволеного розміру в [scrollDirection]. Якщо подання прокрутки має необмежені обмеження в [scrollDirection], тоді [shrinkWrap] має бути істинним.

Термоусадочне обгортання вмісту подання прокрутки значно дорожче, ніж розширення до максимально дозволеного розміру, оскільки вміст може розширюватися і стискатися під час прокрутки, а це означає, що розмір перегляду прокрутки потрібно перераховувати, коли змінюється положення прокрутки.

За замовчуванням false.

Отже, беручи словниковий запас документів, тут відбувається те, що ми ListViewперебуваємо в ситуації необмежених обмежень (у напрямку, який ми прокручуємо), отже, ListViewбуде скаржитися, що:

... вертикальному огляду було надано необмежену кількість вертикального простору для розширення.

Просто встановивши shrinkWrapзначення true, переконайтеся, що він обертає свій розмір, визначений вмістом. Зразок коду для ілюстрації:

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

Ось що відбувається з вашим кодом, тим не менше, пропозиція @ Rémi найкраща для цього випадку, використовуючи Alignзамість Column.


28

помістити сітку в гнучкий або розширений віджет

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
Розгорнуто та додано shrinkWrap: trueдо GridView.
Вільмер

14

Ця ситуація зазвичай трапляється, коли прокручуваний віджет вкладено в інший віджетний віджет.

У моєму випадку я використовую GridView всередині стовпця, і ця помилка видає.

Віджет GridView має shrinkWrapвластивість / named параметр, щоб встановити його, trueмоя проблема виправлена.

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

10

Не використовуйте Columnдля вирівнювання однієї дитини. Використовуйте Alignзамість цього.

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

Це хоч і вирішило мою помилку, але все ж я не можу відцентрувати свій GridView вертикально. Він показує те саме, що і раніше. Спробував усі прапори для вирівнювання. * Чого мені не вистачає?
Паллав Бохара,

6

Хоча shrinkWrapзробіть все, але ви не можете прокрутити ListView.

Якщо вам потрібна функція прокрутки, ви можете додати physicsвластивість:

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

5

Ця відповідь базується на півночі @CopsOnRoad

Це трапляється тому, що ListView/GridViewвіджет не має батьківського елемента, щоб визначити його розмір, тому його висота нескінченна, і метушня не знає висоти ListView і не може зробити.

  1. Рішення перше: фіксована висота

    Оберніть його безпосередньо за допомогою Containerабо, SizedBoxщоб записати мертву висоту.

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

Це добре, але якщо висота повинна бути адаптивною, це не спрацює, якщо ви її напишете.

  1. Рішення друге: shrinkWrap: true

    Спробуйте shrinkWrap: trueз physics: ScrollPhysics()для скролінгу

    shrinkWrap: trueтрохи схожий на Android wrap_content.

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

Однак після компіляції ви знайдете довге жовте попередження внизу сторінки.

Тож досі не може

  1. Рішення третє: розширене або гнучке

    Flexible Це гнучка розкладка у флаттері, еквівалентна LinearLayout в android.

    У гнучкому є один flex. Атрибут, рівний layout_weight, займає весь залишок місця.

    Отже, ми можемо обернути ListView гнучким.

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

Ця відповідь заснована: Вертикальне вікно перегляду отримало необмежену висоту.


Усі вони вже описані в моєму рішенні Paresh. Сподіваюся, ви додали щось нове.
CopsOnRoad

Так, я знаю, але я намагався пояснити це рішення, навіть я думаю, що також слід згадати вас як честь
Пареш Мангукія,

1

протестуйте цей для другого перегляду списку

ListView.builder(
            physics: NeverScrollableScrollPhysics(),

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.