"Объект RenderStack получил бесконечный размер во время макета" при использовании "Помещено внутри стека"

Question

Я создаю виджет, который представляет Stack внутри Container. Внутри Stack есть динамика Column внутри Positioned виджет, который наклеивает Column к Bottom.

Я пытаюсь завернуть Stack в SingleChildScrollView, что если динамический Column будет иметь много детей, которые он сможет прокручивать.

Но после добавления прокрутки я получаю сообщение об ошибке:

RenderStack object was given an infinite size during layout.

Answer 1

ScrollView не имеет высоты, он будет использовать бесконечную высоту для своих дочерних элементов. Таким образом, стек должен быть обернут в sizeBox с известной высотой, если вы этого хотите. Если вы хотите, чтобы стек заполнил экран, полностью удалите singleChildScrollview. И если вы хотите, чтобы стек можно было прокручивать изнутри. Просто добавьте SingleChildScrollView внутри стека

return Scaffold(
      body: Container(
        color: Colors.blue[100],
        child: Stack(
          children: [
            Positioned.fill(child: SingleChildScrollView(child: MyColumn()))
          ],
        ),
      ),
    );

РЕДАКТИРОВАТЬ 1: Хорошо, проблема в самом макете. Поскольку вы используете стек только для размещения изображения. И вы знаете ширину и высоту изображения, а форма фона заполняет все элементы. Мы могли бы

Изолируйте стек только по изображению и используйте отступы и некоторые вычисления, чтобы компоновка была построена аналогичным образом.

Затем визуализируйте все остальное внутри обычного столбца

Моя реализация https://dartpad.dev/230b14d8f0b22b45929a75c208786257

Answer 2

Из RenderStack документация:

Во-первых, непозиционированные дочерние элементы (те, которые имеют нулевые значения для верхнего, правого, нижнего и левого) размещаются и изначально помещаются в верхний левый угол стека. Затем размер стека изменяется так, чтобы в него входили все непозиционированные дочерние элементы. Если нет непозиционированных дочерних элементов, стек становится максимально большим.

Поскольку все ваши Stackразмещены дети, Stack будет соответствовать ограничению максимального размера, переданному SingleChildScrollView. Этот размер имеет бесконечную высоту, поэтому Stack также вынужден иметь бесконечную высоту.

Чтобы исправить это, вам нужно будет найти другой способ добиться того, чего вы хотите. Один из вариантов, который приходит на ум, включает ConstrainedBox обеспечение минимальной высоты (получается из LayoutBuilder), непозиционированный Column, а bottomCenter выравнивание по Stackсам. Это похоже на первый пример кода в SingleChildScrollView документация:

LayoutBuilder(
  builder: (context, constraints) {
    return SingleChildScrollView(
      child: ConstrainedBox(
        // This ensures that the Stack fills the entire viewport,
        // even if the Column is small.
        constraints: BoxConstraints(
          minHeight: constraints.maxHeight,
        ),
        child: Stack(
          // Place the only non-positioned child (the column) at the bottom
          alignment: Alignment.bottomCenter,
          children: [
            Column(
              mainAxisSize: MainAxisSize.min,
              children: [ /* ... */ ]
            )
          ]
        )
      )
    );
  }
)