如何在ListView中正确嵌套ListView.builder?

时间:2019-01-23 13:44:08

标签: dart flutter

我正在尝试嵌套ListView,但是不幸的是,我被RENDER LIBRARY排除在外。我尝试了多种从现有引用嵌套ListView的方法,但是我所做的一切使我感到困惑。

这是您所看到的应用程序的概念设计。我正在尝试为流派添加新的listview.builder,然后投射类型和按钮。

Image of concept design

Image of Code

文件的主要链接: https://gist.github.com/purplecandy/279364f2a229ee3120a4b7474123dba9

实际上,我在尝试不同的错误实现时遇到了不同类型的错误:/。这来自当前的实现方式

I/flutter ( 2244): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter ( 2244): The following assertion was thrown during performLayout():
I/flutter ( 2244): 'package:flutter/src/rendering/viewport.dart': Failed assertion: line 1598 pos 16:
I/flutter ( 2244): 'constraints.hasBoundedHeight': is not true.
I/flutter ( 2244):
I/flutter ( 2244): Either the assertion indicates an error in the framework itself, or we should provide substantially
I/flutter ( 2244): more information in this error message to help you determine and fix the underlying cause.
I/flutter ( 2244): In either case, please report this assertion by filing a bug on GitHub:
I/flutter ( 2244):   https://github.com/flutter/flutter/issues/new?template=BUG.md
I/flutter ( 2244):
I/flutter ( 2244): When the exception was thrown, this was the stack:
I/flutter ( 2244): #2      RenderShrinkWrappingViewport.performLayout (package:flutter/src/rendering/viewport.dart:1598:16)
I/flutter ( 2244): #3      RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter ( 2244): #4      _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:104:13)
I/flutter ( 2244): #5      RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter ( 2244): #6      _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:104:13)
I/flutter ( 2244): #7      RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter ( 2244): #8      _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:104:13)
I/flutter ( 2244): #9      RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter ( 2244): #10     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:104:13)
I/flutter ( 2244): #11     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter ( 2244): #12     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:104:13)
I/flutter ( 2244): #13     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter ( 2244): #14     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:104:13)
I/flutter ( 2244): #15     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter ( 2244): #16     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:104:13)
I/flutter ( 2244): #17     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter ( 2244): #18     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:104:13)
I/flutter ( 2244): #19     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter ( 2244): #20     RenderFlex.performLayout (package:flutter/src/rendering/flex.dart:738:15)
I/flutter ( 2244): #21     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter ( 2244): #22     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:104:13)
I/flutter ( 2244): #23     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter ( 2244): #24     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:104:13)
I/flutter ( 2244): #25     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter ( 2244): #26     RenderSliverMultiBoxAdaptor.insertAndLayoutChild (package:flutter/src/rendering/sliver_multi_box_adaptor.dart:404:13)
I/flutter ( 2244): #27     RenderSliverList.performLayout.advance (package:flutter/src/rendering/sliver_list.dart:190:19)
I/flutter ( 2244): #28     RenderSliverList.performLayout (package:flutter/src/rendering/sliver_list.dart:233:19)
I/flutter ( 2244): #29     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter ( 2244): #30     RenderSliverPadding.performLayout (package:flutter/src/rendering/sliver_padding.dart:182:11)
I/flutter ( 2244): #31     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter ( 2244): #32     RenderViewportBase.layoutChildSequence (package:flutter/src/rendering/viewport.dart:405:13)
I/flutter ( 2244): #33     RenderViewport._attemptLayout (package:flutter/src/rendering/viewport.dart:1316:12)
I/flutter ( 2244): #34     RenderViewport.performLayout (package:flutter/src/rendering/viewport.dart:1234:20)
I/flutter ( 2244): #35     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter ( 2244): #36     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:104:13)
I/flutter ( 2244): #37     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter ( 2244): #38     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:104:13)
I/flutter ( 2244): #39     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter ( 2244): #40     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:104:13)
I/flutter ( 2244): #41     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter ( 2244): #42     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:104:13)
I/flutter ( 2244): #43     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter ( 2244): #44     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:104:13)
I/flutter ( 2244): #45     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter ( 2244): #46     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:104:13)
I/flutter ( 2244): #47     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter ( 2244): #48     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:104:13)
I/flutter ( 2244): #49     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter ( 2244): #50     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:104:13)
I/flutter ( 2244): #51     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter ( 2244): #52     MultiChildLayoutDelegate.layoutChild (package:flutter/src/rendering/custom_layout.dart:142:11)
I/flutter ( 2244): #53     _ScaffoldLayout.performLayout (package:flutter/src/material/scaffold.dart:339:7)
I/flutter ( 2244): #54     MultiChildLayoutDelegate._callPerformLayout (package:flutter/src/rendering/custom_layout.dart:212:7)
I/flutter ( 2244): #55     RenderCustomMultiChildLayoutBox.performLayout (package:flutter/src/rendering/custom_layout.dart:356:14)
I/flutter ( 2244): #56     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter ( 2244): #57     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:104:13)
I/flutter ( 2244): #58     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter ( 2244): #59     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:104:13)
I/flutter ( 2244): #60     _RenderCustomClip.performLayout (package:flutter/src/rendering/proxy_box.dart:1188:11)
I/flutter ( 2244): #61     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter ( 2244): #62     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:104:13)
I/flutter ( 2244): #63     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter ( 2244): #64     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:104:13)
I/flutter ( 2244): #65     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter ( 2244): #66     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:104:13)
I/flutter ( 2244): #67     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter ( 2244): #68     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:104:13)
I/flutter ( 2244): #69     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter ( 2244): #70     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:104:13)
I/flutter ( 2244): #71     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter ( 2244): #72     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:104:13)
I/flutter ( 2244): #73     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter ( 2244): #74     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:104:13)
I/flutter ( 2244): #75     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter ( 2244): #76     RenderOffstage.performLayout (package:flutter/src/rendering/proxy_box.dart:2879:14)
I/flutter ( 2244): #77     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter ( 2244): #78     RenderStack.performLayout (package:flutter/src/rendering/stack.dart:510:15)
I/flutter ( 2244): #79     RenderObject._layoutWithoutResize (package:flutter/src/rendering/object.dart:1509:7)
I/flutter ( 2244): #80     PipelineOwner.flushLayout (package:flutter/src/rendering/object.dart:768:18)
I/flutter ( 2244): #81     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding.drawFrame (package:flutter/src/rendering/binding.dart:281:19)
I/flutter ( 2244): #82     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding&WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:677:13)
I/flutter ( 2244): #83     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:219:5)
I/flutter ( 2244): #84     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:990:15)
I/flutter ( 2244): #85     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:930:9)
I/flutter ( 2244): #86     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._handleDrawFrame (package:flutter/src/scheduler/binding.dart:842:5)
I/flutter ( 2244): #87     _invoke (dart:ui/hooks.dart:154:13)
I/flutter ( 2244): #88     _drawFrame (dart:ui/hooks.dart:143:3)
I/flutter ( 2244): (elided 2 frames from class _AssertionError)
I/flutter ( 2244):
I/flutter ( 2244): The following RenderObject was being processed when the exception was fired:
I/flutter ( 2244):   RenderShrinkWrappingViewport#9e743 relayoutBoundary=up14 NEEDS-LAYOUT NEEDS-PAINT
I/flutter ( 2244):   creator: ShrinkWrappingViewport ← _ScrollableScope ← IgnorePointer-[GlobalKey#75473] ← Semantics ←
I/flutter ( 2244):   Listener ← _GestureSemantics ←
I/flutter ( 2244):   RawGestureDetector-[LabeledGlobalKey<RawGestureDetectorState>#a81bd] ←
I/flutter ( 2244):   _ScrollSemantics-[GlobalKey#aa93a] ← RepaintBoundary ← CustomPaint ← RepaintBoundary ←
I/flutter ( 2244):   NotificationListener<ScrollNotification> ← ⋯
I/flutter ( 2244):   parentData: <none> (can use size)
I/flutter ( 2244):   constraints: BoxConstraints(0.0<=w<=391.4, 0.0<=h<=Infinity)
I/flutter ( 2244):   size: MISSING
I/flutter ( 2244):   axisDirection: right
I/flutter ( 2244):   crossAxisDirection: down
I/flutter ( 2244):   offset: ScrollPositionWithSingleContext#2a8f7(offset: 0.0, range: null..null, viewport: null,
I/flutter ( 2244):   ScrollableState, ClampingScrollPhysics, IdleScrollActivity#ff81b, ScrollDirection.idle)
I/flutter ( 2244): This RenderObject had the following descendants (showing up to depth 5):
I/flutter ( 2244):   RenderSliverPadding#c485f NEEDS-LAYOUT NEEDS-PAINT
I/flutter ( 2244):     RenderSliverList#1516b NEEDS-LAYOUT NEEDS-PAINT
I/flutter ( 2244): ════════════════════════════════════════════════════════════════════════════════════════════════════
I/flutter ( 2244): Another exception was thrown: RenderBox was not laid out: RenderShrinkWrappingViewport#9e743 relayoutBoundary=up14 NEEDS-PAINT
I/flutter ( 2244): Another exception was thrown: RenderBox was not laid out: RenderIgnorePointer#b0d15 relayoutBoundary=up13 NEEDS-PAINT
I/flutter ( 2244): Another exception was thrown: RenderBox was not laid out: RenderSemanticsAnnotations#110a1 relayoutBoundary=up12 NEEDS-PAINT
I/flutter ( 2244): Another exception was thrown: RenderBox was not laid out: RenderPointerListener#52bac relayoutBoundary=up11 NEEDS-PAINT
I/flutter ( 2244): Another exception was thrown: RenderBox was not laid out: RenderSemanticsGestureHandler#f37d1 relayoutBoundary=up10 NEEDS-PAINT
I/flutter ( 2244): Another exception was thrown: RenderBox was not laid out: _RenderScrollSemantics#3b8cd relayoutBoundary=up9 NEEDS-PAINT
I/flutter ( 2244): Another exception was thrown: RenderBox was not laid out: RenderRepaintBoundary#08271 relayoutBoundary=up8 NEEDS-PAINT
I/flutter ( 2244): Another exception was thrown: RenderBox was not laid out: RenderCustomPaint#8d178 relayoutBoundary=up7 NEEDS-PAINT
I/flutter ( 2244): Another exception was thrown: RenderBox was not laid out: RenderRepaintBoundary#ef2c5 relayoutBoundary=up6 NEEDS-PAINT
I/flutter ( 2244): Another exception was thrown: RenderBox was not laid out: RenderFlex#e3d23 relayoutBoundary=up5 NEEDS-PAINT
I/flutter ( 2244): Another exception was thrown: RenderBox was not laid out: RenderRepaintBoundary#093a9 relayoutBoundary=up4 NEEDS-PAINT
I/flutter ( 2244): Another exception was thrown: 'package:flutter/src/rendering/sliver_multi_box_adaptor.dart': Failed assertion: line 461 pos 12: 'child.hasSize': is not true.
I/flutter ( 2244): Another exception was thrown: NoSuchMethodError: The getter 'scrollOffsetCorrection' was called on null.
I/flutter ( 2244): Another exception was thrown: NoSuchMethodError: The method 'debugAssertIsValid' was called on null.
I/flutter ( 2244): Another exception was thrown: NoSuchMethodError: The getter 'visible' was called on null.
I/flutter ( 2244): GET requested properly
I/flutter ( 2244): Another exception was thrown: RenderBox was not laid out: RenderIndexedSemantics#3afa7 relayoutBoundary=up3 NEEDS-PAINT
I/flutter ( 2244): Another exception was thrown: NoSuchMethodError: The getter 'scrollOffsetCorrection' was called on null.
I/flutter ( 2244): Another exception was thrown: NoSuchMethodError: The method 'debugAssertIsValid' was called on null.
I/flutter ( 2244): Another exception was thrown: NoSuchMethodError: The getter 'visible' was called on null.
I/flutter ( 2244): Another exception was thrown: 'package:flutter/src/rendering/object.dart': Failed assertion: line 1578 pos 12: '!_debugDoingThisLayout': is not true.
I/flutter ( 2244): Another exception was thrown: NoSuchMethodError: The getter 'scrollOffsetCorrection' was called on null.
I/flutter ( 2244): Another exception was thrown: NoSuchMethodError: The method 'debugAssertIsValid' was called on null.
I/flutter ( 2244): Another exception was thrown: NoSuchMethodError: The getter 'visible' was called on null.

2 个答案:

答案 0 :(得分:0)

您必须确保水平ListView处于Widget之类的高度Container内:

class HomePage extends StatefulWidget {
  @override
  State createState() => HomePageState();
}

class HomePageState extends State<HomePage> with TickerProviderStateMixin {
  List<Widget> boxes = [];

  @override
  void initState() {
    boxes.add(
      Container(
        width: 150.0,
        child: DecoratedBox(
          decoration: BoxDecoration(color: Colors.red),
        ),
      ),
    );
    boxes.add(
      Container(
        width: 150.0,
        child: DecoratedBox(
          decoration: BoxDecoration(color: Colors.green),
        ),
      ),
    );
    boxes.add(
      Container(
        width: 150.0,
        child: Container(
          decoration: BoxDecoration(color: Colors.blue),
        ),
      ),
    );
    boxes.add(
      Container(
        width: 150.0,
        child: DecoratedBox(
          decoration: BoxDecoration(color: Colors.orange),
        ),
      ),
    );
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Material(
          child: Column(children: <Widget>[
        Expanded(
            child: ListView(
          children: <Widget>[
            Container(
              height: 200.0,
              child: DecoratedBox(
                decoration: BoxDecoration(color: Colors.red),
              ),
            ),
            Container(
              height: 200.0,
              child: DecoratedBox(
                decoration: BoxDecoration(color: Colors.green),
              ),
            ),
            Container(
              height: 200.0,
              child: DecoratedBox(
                decoration: BoxDecoration(color: Colors.blue),
              ),
            ),
            Container(
              height: 200.0,
              child: ListView.builder(
                scrollDirection: Axis.horizontal,
                itemCount: boxes.length,
                itemBuilder: (context, int index) {
                  return boxes[index];
                },
              ),
            ),
            Container(
              height: 200.0,
              child: DecoratedBox(
                decoration: BoxDecoration(color: Colors.orange),
              ),
            ),
          ],
        ))
      ])),
    );
  }
}

NestedListDemo

答案 1 :(得分:0)

将您的ListView.builder放入具有规定高度的Widget内。

示例:

Container(
      height: double.maxFinite,
      child: ListView.builder(
      shrinkWrap: true,
      scrollDirection: Axis.horizontal,
      itemCount: 6,
      itemBuilder: (BuildContext context, int index) {
           return Text(
                '${index}',
                style:
                    TextStyle(color: Colors.white, fontSize: 146),
                );
      },
)),