ListView与行 - 警告和错误

我正在做一个“无限列表”，其中每个索引有一行2卡。我想使这些卡的大小与上下文相同。所以这两张牌都有一个宽度为2的填充宽度。但我没有得到想要的结果，这是我的初始代码：ListView与行 - 警告和错误

new ListView.builder(
    padding: new EdgeInsets.all(8.0), 
    itemExtent: 20.0, 
    itemCount: gameList == null ? 2 : gameList.length, 
    itemBuilder: (BuildContext context, int index) { 
     if (index == 0) { 
     return new RaisedButton(
      child: new Text("Click me!"), 
      onPressed:() => getGames(), 
     ); 
     } else if (index == 1) { 
     return new Text("For new games"); 
     } 
     return new Container(
     child: new Row(
      mainAxisAlignment: MainAxisAlignment.center, 
      children: <Widget>[ 
      new Card(
       child: new Container(
       child: new Column(
        mainAxisAlignment: MainAxisAlignment.center, 
        crossAxisAlignment: CrossAxisAlignment.center, 
        children: <Widget>[ 
        new Text(gameList[index*2]["name"]) 
        ], 
       ), 
      ), 
      ), 
      new Card(
       child: new Container(
       child: new Column(
        mainAxisAlignment: MainAxisAlignment.center, 
        crossAxisAlignment: CrossAxisAlignment.center, 
        children: <Widget>[ 
        new Text(gameList[index*2+1]["name"]) 
        ], 
       ), 
      ), 
      ), 
      ], 
     ), 
    ); 
    }, 
)

这导致了不需要的视觉效果和异常！截图：

例外：

I/flutter (3907): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY   
╞═════════════════════════════════════════════════════════ 
I/flutter (3907): The following RangeError was thrown during performLayout(): 
I/flutter (3907): RangeError (index): Invalid value: Not in range 0..49,  inclusive: 50 
I/flutter (3907): When the exception was thrown, this was the stack: 
I/flutter (3907): #0  List.[] (dart:core-patch/growable_array.dart:151) 
I/flutter (3907): #1  _HomePageState.build.<anonymous closure>  (/data/user/0/com.yourcompany.gamerel/cache/gamerelyjhxqR/gamerel/lib/pages/home.dart:63:42) 
I/flutter (3907): #2  SliverChildBuilderDelegate.build (package:flutter/src/widgets/sliver.dart:153:33) 
I/flutter (3907): #3  SliverMultiBoxAdaptorElement._build.<anonymous closure> (package:flutter/src/widgets/sliver.dart:578:67) 
I/flutter (3907): #4  _HashMap.putIfAbsent (dart:collection-patch/collection_patch.dart:131) 
I/flutter (3907): #5  SliverMultiBoxAdaptorElement._build (package:flutter/src/widgets/sliver.dart:578:26) 
I/flutter (3907): #6  SliverMultiBoxAdaptorElement.createChild.<anonymous closure> (package:flutter/src/widgets/sliver.dart:591:55) 
I/flutter (3907): #7  BuildOwner.buildScope (package:flutter/src/widgets/framework.dart:2122:19) 
I/flutter (3907): #8  SliverMultiBoxAdaptorElement.createChild (package:flutter/src/widgets/sliver.dart:584:11) 
I/flutter (3907): #9  RenderSliverMultiBoxAdaptor.insertAndLayoutChild.<anonymous closure> (package:flutter/src/rendering/sliver_multi_box_adaptor.dart:282:21) 
I/flutter (3907): #10  RenderObject.invokeLayoutCallback.<anonymous closure> (package:flutter/src/rendering/object.dart:1937:58) 
I/flutter (3907): #11  PipelineOwner._enableMutationsToDirtySubtrees (package:flutter/src/rendering/object.dart:1035:15) 
I/flutter (3907): #12  RenderObject.invokeLayoutCallback (package:flutter/src/rendering/object.dart:1937:13) 
I/flutter (3907): #13  RenderSliverMultiBoxAdaptor.insertAndLayoutChild (package:flutter/src/rendering/sliver_multi_box_adaptor.dart:280:5) 
I/flutter (3907): #14  RenderSliverFixedExtentBoxAdaptor.performLayout (package:flutter/src/rendering/sliver_fixed_extent_list.dart:166:17) 
I/flutter (3907): #15  RenderObject.layout (package:flutter/src/rendering/object.dart:1841:7) 
I/flutter (3907): #16  RenderSliverPadding.performLayout (package:flutter/src/rendering/sliver_padding.dart:144:11) 
I/flutter (3907): #17  RenderObject.layout (package:flutter/src/rendering/object.dart:1841:7) 
I/flutter (3907): #18  RenderViewportBase.layoutChildSequence (package:flutter/src/rendering/viewport.dart:248:13) 
I/flutter (3907): #19  RenderViewport._attemptLayout (package:flutter/src/rendering/viewport.dart:882:12) 
I/flutter (3907): #20  RenderViewport.performLayout (package:flutter/src/rendering/viewport.dart:806:20) 
I/flutter (3907): #21  RenderObject._layoutWithoutResize (package:flutter/src/rendering/object.dart:1718:7) 
I/flutter (3907): #22  PipelineOwner.flushLayout (package:flutter/src/rendering/object.dart:1013:18) 
I/flutter (3907): #23  BindingBase&SchedulerBinding&GestureBinding&ServicesBinding&RendererBinding.drawFrame (package:flutter/src/rendering/binding.dart:251:19) 
I/flutter (3907): #24  BindingBase&SchedulerBinding&GestureBinding&ServicesBinding&RendererBinding&WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:504:22) 
I/flutter (3907): #25  BindingBase&SchedulerBinding&GestureBinding&ServicesBinding&RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:189:5) 
I/flutter (3907): #26  BindingBase&SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:688:15) 
I/flutter (3907): #27  BindingBase&SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:636:9) 
I/flutter (3907): #28  _drawFrame (file:///b/build/slave/Linux_Engine/build/src/flutter/lib/ui/hooks.dart:70) 
I/flutter (3907): The following RenderObject was being processed when the exception was fired: 
I/flutter (3907): RenderSliverFixedExtentList#1052375964 relayoutBoundary=up2 NEEDS-LAYOUT 
I/flutter (3907): creator: SliverFixedExtentList ← SliverPadding ← Viewport ← _ScrollableScope ← 
I/flutter (3907): IgnorePointer-[GlobalKey#486177627] ← Listener ← _GestureSemantics ← 
I/flutter (3907): RawGestureDetector-[LabeledGlobalKey<RawGestureDetectorState>#659063110] ← RepaintBoundary ← 
I/flutter (3907): CustomPaint ← RepaintBoundary ← NotificationListener<ScrollNotification> ← ⋯ 
I/flutter (3907): parentData: paintOffset=Offset(8.0, 8.0) (can use size) 
I/flutter (3907): constraints: SliverConstraints(AxisDirection.down, GrowthDirection.forward, ScrollDirection.idle, 
I/flutter (3907): scrollOffset: 0.0, remainingPaintExtent: 595.4,  crossAxisExtent: 395.4, viewportMainAxisExtent: 
I/flutter (3907): 603.4) 
I/flutter (3907): geometry: SliverGeometry(scrollExtent: 40.0, paintExtent: 40.0, maxPaintExtent: 40.0,) 
I/flutter (3907): currently live children: 0 to 24 
I/flutter (3907): This RenderObject had the following descendants (showing up   to depth 5): 
I/flutter (3907): RenderRepaintBoundary#570038827 
I/flutter (3907):  RenderConstrainedBox#1050372064 
I/flutter (3907):  RenderPhysicalModel#158413069 
I/flutter (3907):   _RenderInkFeatures#87489842 
I/flutter (3907):   RenderSemanticsGestureHandler#431076252 
I/flutter (3907): RenderRepaintBoundary#551737634 
I/flutter (3907):  RenderParagraph#594209207 
I/flutter (3907): RenderRepaintBoundary#766780884 NEEDS-PAINT 
I/flutter (3907):  RenderFlex#923777135 NEEDS-PAINT 
I/flutter (3907):  RenderPadding#893943236 relayoutBoundary=up1 NEEDS-PAINT 
I/flutter (3907):   RenderPhysicalModel#618413979 relayoutBoundary=up2 NEEDS-PAINT 
I/flutter (3907):   _RenderInkFeatures#994799987 relayoutBoundary=up3 NEEDS-PAINT 
I/flutter (3907):  RenderPadding#698030940 relayoutBoundary=up1 NEEDS-PAINT 
I/flutter (3907):   RenderPhysicalModel#956372272 relayoutBoundary=up2 NEEDS-PAINT 
I/flutter (3907):   _RenderInkFeatures#434036791 relayoutBoundary=up3 NEEDS-PAINT 
I/flutter (3907): RenderRepaintBoundary#824949616 NEEDS-PAINT 
I/flutter (3907):  RenderFlex#1033781722 NEEDS-PAINT 
I/flutter (3907):  RenderPadding#207370496 relayoutBoundary=up1 NEEDS-PAINT 
I/flutter (3907):   RenderPhysicalModel#1008320253 relayoutBoundary=up2 NEEDS-PAINT 
I/flutter (3907):   _RenderInkFeatures#1069811468 relayoutBoundary=up3 NEEDS-PAINT 
I/flutter (3907):  RenderPadding#206866148 relayoutBoundary=up1 NEEDS-PAINT 
I/flutter (3907):   RenderPhysicalModel#533018794 relayoutBoundary=up2 NEEDS-PAINT 
I/flutter (3907):   _RenderInkFeatures#262521214 relayoutBoundary=up3 NEEDS-PAINT 
I/flutter (3907): RenderRepaintBoundary#853196269 NEEDS-PAINT 
I/flutter (3907):  RenderFlex#475430551 NEEDS-PAINT 
I/flutter (3907):  RenderPadding#416695211 relayoutBoundary=up1 NEEDS-PAINT 
I/flutter (3907):   RenderPhysicalModel#930790456 relayoutBoundary=up2 NEEDS-PAINT 
I/flutter (3907):   _RenderInkFeatures#644301116 relayoutBoundary=up3 NEEDS-PAINT 
I/flutter (3907): ════════════════════════════════════════════════════════════════════════════════════════════════════

我试图在卡列使用CrossAxisAlignment.stretch但也导致了异常：

I/flutter (3907): The following RangeError was thrown during performLayout(): 
I/flutter (3907): RangeError (index): Invalid value: Not in range 0..49, inclusive: 50

注意，ISN” t完全的例外，但如果我发布这个帖子，这篇文章也会太长。但我会张贴它，如果你需要它:)

来源

2017-06-18 Bram Vanbilsen

如果要使用Column和，则可以使用Expanded来实现卡的规则间距。不过，我认为你应该使用GridView和crossAxisCount的2，因为它是一个专门用于有效布局盒子网格的类。

下面两种方法的代码。

使用GridView：

import 'package:flutter/material.dart'; 

void main() { 
    runApp(new MaterialApp(
    home: new MyHomePage(), 
)); 
} 

List gameList = new List.generate(100, (int index) { 
    return { 
    'name': 'Game $index', 
    }; 
}); 

class MyHomePage extends StatelessWidget { 
    getGames() { 
    } 

    Widget build(BuildContext context) { 
    return new Scaffold(
     appBar: new AppBar(
     title: new Text("GridView example"), 
    ), 
     body: new GridView.builder(
     gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: 2, 
      childAspectRatio: 3.0, 
     ), 
     itemCount: gameList.length, 
     padding: new EdgeInsets.all(8.0), 
     itemBuilder: (BuildContext context, int index) { 
      return new Card(
      child: new Container(
       child: new Center(
       child: new Text(gameList[index]["name"]), 
      ), 
      ), 
     ); 
     }, 
    ), 
    ); 
    } 
}

使用和Column与Expanded：

import 'package:flutter/material.dart'; 

void main() { 
    runApp(new MaterialApp(
    home: new MyHomePage(), 
)); 
} 

List gameList = new List.generate(100, (int index) { 
    return { 
    'name': 'Game $index', 
    }; 
}); 

class MyHomePage extends StatelessWidget { 
    getGames() { 
    } 

    Widget build(BuildContext context) { 
    return new Scaffold(
     appBar: new AppBar(
     title: new Text("Row and Column example"), 
    ), 
     body: new ListView.builder(
     padding: new EdgeInsets.all(8.0), 
     itemExtent: 50.0, 
     itemCount: (gameList.length/2).ceil(), 
     itemBuilder: (BuildContext context, int row) { 
      return new Container(
      child: new Row(
       crossAxisAlignment: CrossAxisAlignment.stretch, 
       children: new List.generate(2, (int column) { 
       return new Expanded(
        child: new Card(
        child: new Container(
         child: new Center(
         child: new Text(gameList[row * 2 + column]["name"]), 
        ), 
        ), 
       ), 
       ); 
       }), 
      ), 
     ); 
     }, 
    ), 
    ); 
    } 
}

来源

2017-06-19 05:20:41

再次感谢科林，只是多了一些问题： - 您可以添加某种headerview到gridview？因此，例如在列表顶部的一个小部件占用了完整的宽度。 - 在列表视图中使用List.generate的例子，但我对“int列”参数感到困惑。列首先是0并创建第一张卡片，然后创建第二张卡片？ –

1.不可以。您可以使用Column将其放在顶部。但是如果你想让他们滚动，SliverGridDelegateWithFixedCrossAxisCount不是正确的选择。您可能可以编写自己的网格委托，或使用列和行方法。 2.列整数将为0或1 –

明白！但我仍然遇到了使用listview方法的问题。卡片显示的方式很小，就像在初始文章中的图片一样。虽然没有任何红色边框。 –

Woops，不用介意的例外。我忘记了每列有两个元素。所以高度必须是列表的长度除以2！

来源

2017-06-18 20:40:46

ListView与行 - 警告和错误

回答

相关问题