堆棧中的 ListView.builder 無法正常工作

Question

我正在嘗試使用 Stack 小部件和 Stack 小部件內的三個 ListView 在顫動中構建一個大獎游戲，但它不起作用。 當我將 ListView 放入 Stack 時出現錯誤。 我曾嘗試先將它包裝在 Expanded、Container 和 Flexible 小部件中，但它不起作用。

這是構建 Scaffold 主體的代碼：

Widget _buildBody(GameArguments args) {
    return Container(
        child: Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        _buildJackpot(),
        _buildPuller(),
      ],
    ));
  }

這是構建累積獎金的代碼：

List<Image> left = [
    Image.asset(
      'src/images/hites_logo_trans2.png',
      height: 100,
      width: 200,
    )
  ];

Widget build(BuildContext context) {
    return Container(
      child: Stack(
        children: [
          Container(),
          Image.asset('src/images/jackpot_fome.png'),
          Container(
            child: ListView.builder(
              itemBuilder: (BuildContext context, int index) {
                return left[index];
              },
            ),
          )
        ],
      ),
    );
  }

這是完整的錯誤日志，我真的不知道發生了什么:(

[38;5;248m════════ Exception caught by rendering library ═════════════════════════════════[39;49m
[38;5;244mThe following assertion was thrown during performResize():[39;49m
Vertical viewport was given unbounded width.

[38;5;244mViewports expand in the cross axis to fill their container and constrain their children to match their extent in the cross axis. In this case, a vertical viewport was given an unlimited amount of horizontal space in which to expand.[39;49m
[38;5;244mThe relevant error-causing widget was[39;49m
[38;5;248mListView[39;49m
 lib/pages/GamePage.dart
[38;5;244mWhen the exception was thrown, this was the stack[39;49m
[38;5;244m#0      RenderViewport.performResize.<anonymous closure>[39;49m
 package:flutter/…/rendering/viewport.dart
[38;5;244m#1      RenderViewport.performResize[39;49m
 package:flutter/…/rendering/viewport.dart
[38;5;244m#2      RenderObject.layout[39;49m
 package:flutter/…/rendering/object.dart
[38;5;244m#3      RenderProxyBoxMixin.performLayout[39;49m
 package:flutter/…/rendering/proxy_box.dart
[38;5;244m#4      RenderObject.layout[39;49m
 package:flutter/…/rendering/object.dart
[38;5;244m...[39;49m
[38;5;244mThe following RenderObject was being processed when the exception was fired: RenderViewport#d36b3 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE[39;49m
[38;5;244mRenderObject: RenderViewport#d36b3 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE[39;49m
    [38;5;244mneeds compositing[39;49m
    [38;5;244mparentData: <none> (can use size)[39;49m
    [38;5;244mconstraints: BoxConstraints(0.0<=w<=Infinity, 0.0<=h<=552.9)[39;49m
    [38;5;244msize: MISSING[39;49m
    [38;5;244maxisDirection: down[39;49m
    [38;5;244mcrossAxisDirection: right[39;49m
    [38;5;244moffset: ScrollPositionWithSingleContext#86e2d(offset: 0.0, range: null..null, viewport: null, ScrollableState, AlwaysScrollableScrollPhysics -> ClampingScrollPhysics -> RangeMaintainingScrollPhysics, IdleScrollActivity#0f03e, ScrollDirection.idle)[39;49m
    [38;5;244manchor: 0.0[39;49m
    [38;5;244mcenter child: RenderSliverPadding#b94be NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE[39;49m
        [38;5;244mparentData: paintOffset=Offset(0.0, 0.0)[39;49m
        [38;5;244mconstraints: MISSING[39;49m
        [38;5;244mgeometry: null[39;49m
        [38;5;244mpadding: EdgeInsets(0.0, 24.0, 0.0, 0.0)[39;49m
        [38;5;244mtextDirection: ltr[39;49m
        [38;5;244mchild: RenderSliverList#00bb5 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE[39;49m
            [38;5;244mparentData: paintOffset=Offset(0.0, 0.0)[39;49m
            [38;5;244mconstraints: MISSING[39;49m
            [38;5;244mgeometry: null[39;49m
            [38;5;244mno children current live[39;49m
[38;5;248m════════════════════════════════════════════════════════════════════════════════[39;49m

[38;5;248m════════ Exception caught by rendering library ═════════════════════════════════[39;49m
RenderBox was not laid out: RenderViewport#d36b3 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1785 pos 12: 'hasSize'
[38;5;244mThe relevant error-causing widget was[39;49m
[38;5;248mListView[39;49m
 lib/pages/GamePage.dart
[38;5;248m════════════════════════════════════════════════════════════════════════════════[39;49m

[38;5;248m════════ Exception caught by rendering library ═════════════════════════════════[39;49m
RenderBox was not laid out: RenderViewport#d36b3 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1785 pos 12: 'hasSize'
[38;5;244mThe relevant error-causing widget was[39;49m
[38;5;248mListView[39;49m
 lib/pages/GamePage.dart
[38;5;248m════════════════════════════════════════════════════════════════════════════════[39;49m

[38;5;248m════════ Exception caught by rendering library ═════════════════════════════════[39;49m
RenderBox was not laid out: RenderIgnorePointer#313f0 relayoutBoundary=up11 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1785 pos 12: 'hasSize'
[38;5;244mThe relevant error-causing widget was[39;49m
[38;5;248mListView[39;49m
 lib/pages/GamePage.dart
[38;5;248m════════════════════════════════════════════════════════════════════════════════[39;49m

[38;5;248m════════ Exception caught by rendering library ═════════════════════════════════[39;49m
RenderBox was not laid out: RenderSemanticsAnnotations#a67f0 relayoutBoundary=up10 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1785 pos 12: 'hasSize'
[38;5;244mThe relevant error-causing widget was[39;49m
[38;5;248mListView[39;49m
 lib/pages/GamePage.dart
[38;5;248m════════════════════════════════════════════════════════════════════════════════[39;49m

[38;5;248m════════ Exception caught by rendering library ═════════════════════════════════[39;49m
RenderBox was not laid out: RenderPointerListener#ec676 relayoutBoundary=up9 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1785 pos 12: 'hasSize'
[38;5;244mThe relevant error-causing widget was[39;49m
[38;5;248mListView[39;49m
 lib/pages/GamePage.dart
[38;5;248m════════════════════════════════════════════════════════════════════════════════[39;49m

[38;5;248m════════ Exception caught by rendering library ═════════════════════════════════[39;49m
RenderBox was not laid out: RenderSemanticsGestureHandler#1df12 relayoutBoundary=up8 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1785 pos 12: 'hasSize'
[38;5;244mThe relevant error-causing widget was[39;49m
[38;5;248mListView[39;49m
 lib/pages/GamePage.dart
[38;5;248m════════════════════════════════════════════════════════════════════════════════[39;49m

[38;5;248m════════ Exception caught by rendering library ═════════════════════════════════[39;49m
RenderBox was not laid out: RenderPointerListener#f871d relayoutBoundary=up7 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1785 pos 12: 'hasSize'
[38;5;244mThe relevant error-causing widget was[39;49m
[38;5;248mListView[39;49m
 lib/pages/GamePage.dart
[38;5;248m════════════════════════════════════════════════════════════════════════════════[39;49m

[38;5;248m════════ Exception caught by rendering library ═════════════════════════════════[39;49m
RenderBox was not laid out: _RenderScrollSemantics#5c527 relayoutBoundary=up6 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1785 pos 12: 'hasSize'
[38;5;244mThe relevant error-causing widget was[39;49m
[38;5;248mListView[39;49m
 lib/pages/GamePage.dart
[38;5;248m════════════════════════════════════════════════════════════════════════════════[39;49m

[38;5;248m════════ Exception caught by rendering library ═════════════════════════════════[39;49m
RenderBox was not laid out: RenderRepaintBoundary#50cc7 relayoutBoundary=up5 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1785 pos 12: 'hasSize'
[38;5;244mThe relevant error-causing widget was[39;49m
[38;5;248mListView[39;49m
 lib/pages/GamePage.dart
[38;5;248m════════════════════════════════════════════════════════════════════════════════[39;49m

[38;5;248m════════ Exception caught by rendering library ═════════════════════════════════[39;49m
RenderBox was not laid out: RenderCustomPaint#7a42d relayoutBoundary=up4 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1785 pos 12: 'hasSize'
[38;5;244mThe relevant error-causing widget was[39;49m
[38;5;248mListView[39;49m
 lib/pages/GamePage.dart
[38;5;248m════════════════════════════════════════════════════════════════════════════════[39;49m

[38;5;248m════════ Exception caught by rendering library ═════════════════════════════════[39;49m
RenderBox was not laid out: RenderRepaintBoundary#a7239 relayoutBoundary=up3 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1785 pos 12: 'hasSize'
[38;5;244mThe relevant error-causing widget was[39;49m
[38;5;248mStack[39;49m
 lib/pages/GamePage.dart
[38;5;248m════════════════════════════════════════════════════════════════════════════════[39;49m
Reloaded 3 of 581 libraries in 571ms.

[38;5;248m════════ Exception caught by rendering library ═════════════════════════════════[39;49m
RenderBox was not laid out: RenderRepaintBoundary#a7239 relayoutBoundary=up3 NEEDS-PAINT
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1785 pos 12: 'hasSize'
[38;5;244mThe relevant error-causing widget was[39;49m
[38;5;248mStack[39;49m
 lib/pages/GamePage.dart
[38;5;248m════════════════════════════════════════════════════════════════════════════════[39;49m

Answer 1

這段代碼有很多問題。 首先，您必須在 Listview.builder 中提供 itemcount。 其次，您需要調整包裝它所描述的 ListView 的 Container 的大小。

Answer 2

有兩個主要問題

1. ListView 沒有項目計數
2. 你必須用容器或大小的盒子或卡片包裹你的 lsitview 以給它一些高度

試試這個代碼：我想你可能會得到你的答案

容器（高度：500，寬度：MediaQuery.of(context).size.width, child: ListView.builder( itemCount: 13, itemBuilder: (context, i) { return Padding( padding: const EdgeInsets.all(8.0), child: ListTile(title: Text("Try it"),), ); }, ), ),