Flutter 自定義 Widget 的 ListView 包括 ListView 給出錯誤

Question

我正在嘗試創建一個顯示列表中多個項目的小部件，使用其他小部件（包括自定義小部件）來顯示這些項目

這是結構：

TriesWidget
-- Container
------ TryWidget
-------- Row
---------- IconButton
---------- CombinationWidget
------------ Row
-------------- ListView
---------------- ... (Container)

這是應用程序的工作代碼，只有一項（最后一項）

嘗試小部件

class TriesWidget extends StatefulWidget {

  final Mastermind mastermind;

  TriesWidget({Key key, @required this.mastermind}) : super(key: key);

  @override
  _TriesWidgetState createState() => _TriesWidgetState();
}

class _TriesWidgetState extends State<TriesWidget> {

  void _handleButtonPressed(bool newValue) {
    setState(() {
      widget.mastermind.checkLastTry();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: TryWidget(
          tryModel: widget.mastermind.tries.last,
          onChanged: _handleButtonPressed
      ),
    );
  }
}

TryWidget

class TryWidget extends StatelessWidget {

  TryWidget({Key key, @required this.tryModel, @required this.onChanged}) : super(key: key);

  final ValueChanged<bool> onChanged;
  final Try tryModel;

  void _handlePressed() {
    onChanged(true);
  }

  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        CombinationWidget( combination: tryModel.tryCode),
        IconButton(
          iconSize: 50,
          onPressed: _handlePressed,
          icon: Icon(Icons.check_circle, color: Colors.lightGreen,),
        ),
      ],
    );
  }
}

組合小工具

class CombinationWidget extends StatefulWidget {

  final Combination combination;

  CombinationWidget({Key key, @required this.combination}) : super(key: key);

  @override
  _CombinationWidgetState createState() => _CombinationWidgetState();
}

class _CombinationWidgetState extends State<CombinationWidget> {

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        ListView.builder(
            shrinkWrap: true,
            itemCount: Settings.codeLength,
            scrollDirection: Axis.horizontal,
            itemBuilder: (context, position)
            {
              return GestureDetector(
                onTap: () => _modifyCode(position),
                child: new PegItem(pegModel: widget.combination[position]),
              );
            }
        ),
      ],
    );
  }

  void _modifyCode(int position)
  {
    setState(()
    {
      Mastermind.modifyCode(widget.combination, position);
    });
  }

}

這是應該產生我預期結果的一段代碼（顯示所有項目）：

嘗試小部件

class TriesWidget extends StatefulWidget {

  final Mastermind mastermind;

  TriesWidget({Key key, @required this.mastermind}) : super(key: key);

  @override
  _TriesWidgetState createState() => _TriesWidgetState();
}

class _TriesWidgetState extends State<TriesWidget> {

  void _handleButtonPressed(bool newValue) {
    setState(() {
      widget.mastermind.checkLastTry();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: double.maxFinite,
      child: ListView.builder(
          itemCount: widget.mastermind.tries.length,
          shrinkWrap: true,
          itemBuilder: (BuildContext context, int index) {
            return new TryWidget(
                tryModel: widget.mastermind.tries.elementAt(index),
                onChanged: _handleButtonPressed
            );
          }
      ),
    );
  }
}

它產生的錯誤：

════════ Exception caught by rendering library ═════════════════════════════════════════════════════
The following assertion was thrown during performLayout():
'package:flutter/src/rendering/viewport.dart': Failed assertion: line 1634 pos 16: 'constraints.hasBoundedHeight': is not true.


Either the assertion indicates an error in the framework itself, or we should provide substantially more information in this error message to help you determine and fix the underlying cause.
In either case, please report this assertion by filing a bug on GitHub:
  https://github.com/flutter/flutter/issues/new?template=BUG.md

User-created ancestor of the error-causing widget was: 
  ListView file:///C:/Users/TBG/Repositories/CPE-S7_MPA_Mastermind/FlutterTest/flutter_app/lib/widgets/combination.widget.dart:25:18
When the exception was thrown, this was the stack: 
#2      RenderShrinkWrappingViewport.performLayout (package:flutter/src/rendering/viewport.dart:1634:16)
#3      RenderObject.layout (package:flutter/src/rendering/object.dart:1701:7)
#4      RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
#5      RenderObject.layout (package:flutter/src/rendering/object.dart:1701:7)
#6      RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
...
The following RenderObject was being processed when the exception was fired: RenderShrinkWrappingViewport#f596e relayoutBoundary=up28 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...  needs compositing
...  parentData: <none> (can use size)
...  constraints: BoxConstraints(unconstrained)
...  size: MISSING
...  axisDirection: right
...  crossAxisDirection: down
...  offset: ScrollPositionWithSingleContext#ee282(offset: 0.0, range: null..null, viewport: null, ScrollableState, ClampingScrollPhysics, IdleScrollActivity#4b904, ScrollDirection.idle)
RenderObject: RenderShrinkWrappingViewport#f596e relayoutBoundary=up28 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
  needs compositing
  parentData: <none> (can use size)
  constraints: BoxConstraints(unconstrained)
  size: MISSING
  axisDirection: right
  crossAxisDirection: down
  offset: ScrollPositionWithSingleContext#ee282(offset: 0.0, range: null..null, viewport: null, ScrollableState, ClampingScrollPhysics, IdleScrollActivity#4b904, ScrollDirection.idle)
...  child 0: RenderSliverPadding#5928b NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...    parentData: layoutOffset=0.0
...    constraints: MISSING
...    geometry: null
...    padding: EdgeInsets.zero
...    textDirection: ltr
...    child: RenderSliverList#44c1f NEEDS-LAYOUT NEEDS-PAINT
...      parentData: paintOffset=Offset(0.0, 0.0)
...      constraints: MISSING
...      geometry: null
...      no children current live
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ (2) Exception caught by rendering library ═════════════════════════════════════════════════
RenderBox was not laid out: RenderShrinkWrappingViewport#f596e relayoutBoundary=up28 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1681 pos 12: 'hasSize'
User-created ancestor of the error-causing widget was: 
  ListView file:///C:/Users/TBG/Repositories/CPE-S7_MPA_Mastermind/FlutterTest/flutter_app/lib/widgets/combination.widget.dart:25:18
════════════════════════════════════════════════════════════════════════════════════════════════════

[...]

════════ (28) Exception caught by rendering library ════════════════════════════════════════════════
RenderBox was not laid out: RenderConstrainedBox#ac5d6 relayoutBoundary=up2 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1681 pos 12: 'hasSize'
User-created ancestor of the error-causing widget was: 
  Scaffold file:///C:/Users/TBG/Repositories/CPE-S7_MPA_Mastermind/FlutterTest/flutter_app/lib/widgets/mastermind.widget.dart:21:12
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ (29) Exception caught by rendering library ════════════════════════════════════════════════
RenderBox was not laid out: RenderFlex#faa61 relayoutBoundary=up1 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1681 pos 12: 'hasSize'
User-created ancestor of the error-causing widget was: 
  Scaffold file:///C:/Users/TBG/Repositories/CPE-S7_MPA_Mastermind/FlutterTest/flutter_app/lib/widgets/mastermind.widget.dart:21:12
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ (30) Exception caught by rendering library ════════════════════════════════════════════════
The method '>' was called on null.
Receiver: null
Tried calling: >(1e-10)
User-created ancestor of the error-causing widget was: 
  Scaffold file:///C:/Users/TBG/Repositories/CPE-S7_MPA_Mastermind/FlutterTest/flutter_app/lib/widgets/mastermind.widget.dart:21:12
════════════════════════════════════════════════════════════════════════════════════════════════════

我在網上嘗試了許多解決方案（添加收縮、約束、固定高度、使用擴展，......）但我找不到問題，它的解決方案

Answer 1

您收到“viewport hasBoundedHeight”錯誤的原因是您在 ListView 中使用了 ListView。 您可能需要考慮使用 CustomScrollView 和 SliverList。 此處介紹了有關此的更多詳細信息。