Flutter Было выброшено еще одно исключение: RenderBox не был выложен: RenderRepaintBoundary#eaea6 NEEDS-LAYOUT NEEDS-PAINT

Question

Я использую SingleChildScrollView и столбец для отображения Swiper и сетки.

Если я использую какой-то другой виджет, например текст, изображение в моем столбце, приложение показывает нормально. Но мой swiper и gridview не могут быть показаны и сообщают об ошибке:

I/flutter ( 4687): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter ( 4687): The following assertion was thrown during performLayout():
I/flutter ( 4687): RenderFlex children have non-zero flex but incoming height constraints are unbounded.
I/flutter ( 4687): When a column is in a parent that does not provide a finite height constraint, for example if it is
I/flutter ( 4687): in a vertical scrollable, it will try to shrink-wrap its children along the vertical axis. Setting a
I/flutter ( 4687): flex on a child (e.g. using Expanded) indicates that the child is to expand to fill the remaining
I/flutter ( 4687): space in the vertical direction.
I/flutter ( 4687): These two directives are mutually exclusive. If a parent is to shrink-wrap its child, the child
I/flutter ( 4687): cannot simultaneously expand to fit its parent.
I/flutter ( 4687): Consider setting mainAxisSize to MainAxisSize.min and using FlexFit.loose fits for the flexible
I/flutter ( 4687): children (using Flexible rather than Expanded). This will allow the flexible children to size
I/flutter ( 4687): themselves to less than the infinite remaining space they would otherwise be forced to take, and
I/flutter ( 4687): then will cause the RenderFlex to shrink-wrap the children rather than expanding to fit the maximum
I/flutter ( 4687): constraints provided by the parent.
I/flutter ( 4687): The affected RenderFlex is:
I/flutter ( 4687):   RenderFlex#1f4de relayoutBoundary=up14 NEEDS-LAYOUT NEEDS-PAINT
I/flutter ( 4687): The creator information is set to:
I/flutter ( 4687):   Column ← _SingleChildViewport ← IgnorePointer-[GlobalKey#ae070] ← Semantics ← Listener ←
I/flutter ( 4687):   _GestureSemantics ← RawGestureDetector-[LabeledGlobalKey<RawGestureDetectorState>#e4f77] ←
I/flutter ( 4687):   _ScrollableScope ← _ScrollSemantics-[GlobalKey#4bb86] ← RepaintBoundary ← CustomPaint ←
I/flutter ( 4687):   RepaintBoundary ← ⋯

Я привык быть разработчиком UWP, и плохо знаком с трепетом. Кто-нибудь может помочь? Вот код:

class _HomePageState extends State<HomePage> {
  final List<ListItem> _children;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body:SingleChildScrollView(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: <Widget>[
            Expanded(
                child: Container(
              height: 200,
              child: Swiper(
                itemBuilder: (BuildContext context, int index) {
                  return Image.network(
                    "http://via.placeholder.com/350x150",
                    fit: BoxFit.fitHeight,
                  );
                },
                itemCount: 5,
                pagination: SwiperPagination(),
                control: SwiperControl(),
              ),
            )),
            Expanded(
              child: GridView.builder(
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 4, childAspectRatio: 1.0),
                itemBuilder: (BuildContext context, int index) {
                  return ListItemWidget(_children[index]);
                },
                itemCount: _children.length,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 1

Вы не можете иметь Expanded виджет в пределах SingleChildScrollView который имеет безграничные вертикальные размеры.

class _HomePageState extends State<HomePage> {
  final List<ListItem> _children;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Column(
          mainAxisSize: MainAxisSize.min,
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: <Widget>[
            Expanded(
                child: Container(
              height: 200,
              child: Swiper(
                itemBuilder: (BuildContext context, int index) {
                  return Image.network(
                    "http://via.placeholder.com/350x150",
                    fit: BoxFit.fitHeight,
                  );
                },
                itemCount: 5,
                pagination: SwiperPagination(),
                control: SwiperControl(),
              ),
            )),
            Expanded(
              child: GridView.builder(
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 4, childAspectRatio: 1.0),
                itemBuilder: (BuildContext context, int index) {
                  return ListItemWidget(_children[index]);
                },
                itemCount: _children.length,
              ),
            ),
          ],
      ),
    );
  }
}

Answer 2

Вы можете разместить свой столбец внутри SizedBox, а затем обернуть SizedBox с помощью SingleChildScrollView

Например:

      new Scaffold(
body: SingleChildScrollView(
    child: Sizedbox(
      child: new Column(
        children: <Widget>[
          header,
          new Padding(
            child: GridView.builder(
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 4, childAspectRatio: 1.0),
                itemBuilder: (BuildContext context, int index) {
                  return ListItemWidget(_children[index]);
                },
                itemCount: _children.length,
              ),
          ),
        ],
      ),
  ),
),

Answer 3

У меня была точно такая же проблема, и для меня сработало сначала обернуть swiper расширенным виджетом, а затем обернуть расширенный контейнер с необходимыми размерами 1.Container2. Expanded3. Swiper