मैं एक "अनंत सूची" बना रहा हूं जिसमें प्रत्येक अनुक्रमणिका में 2 कार्ड वाली पंक्ति होती है। मैं इन कार्डों को उनके संदर्भ केंद्रित के साथ समान आकार का बनाना चाहता हूं। तो दोनों कार्ड की कुल चौड़ाई/2 - पैडिंग की चौड़ाई है। लेकिन मुझे वांछित परिणाम नहीं मिल रहा है, यह मेरा प्रारंभिक कोड था:

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

ध्यान दें कि यह पूर्ण अपवाद नहीं है, लेकिन अगर मैं इसे भी पोस्ट करता तो यह पोस्ट बहुत लंबा हो जाता। लेकिन अगर आपको इसकी ज़रूरत है तो मैं इसे पोस्ट करूंगा :)

0
Bram Vanbilsen 18 जून 2017, 16:10

1 उत्तर

सबसे बढ़िया उत्तर

यदि आप Column और Row का उपयोग करना चाहते हैं, तो आप कार्ड की नियमित रिक्ति प्राप्त करने के लिए Expanded का उपयोग कर सकते हैं। हालांकि, मुझे लगता है कि आपको शायद GridView crossAxisCount 2 के साथ, क्योंकि यह बक्से के ग्रिड को कुशलतापूर्वक बिछाने के लिए एक विशेष वर्ग है।

नीचे दोनों दृष्टिकोणों के लिए कोड।

screenshot

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"]),
              ),
            ),
          );
        },
      ),
    );
  }
}

Row और 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"]),
                      ),
                    ),
                  ),
                );
              }),
            ),
          );
        },
      ),
    );
  }
}
2
Collin Jackson 19 जून 2017, 08:20
फिर से धन्यवाद कॉलिन, बस कुछ और प्रश्न: - क्या आप ग्रिडव्यू में किसी प्रकार का हेडर जोड़ सकते हैं? तो उदाहरण के लिए सूची के शीर्ष पर एक विजेट जो पूरी चौड़ाई लेता है। - सूचीदृश्य उदाहरण में आप List.generate का उपयोग करते हैं लेकिन मैं "int कॉलम" परम के बारे में उलझन में हूं। क्या कॉलम पहले 0 होने वाला है और पहला कार्ड और उसके बाद 2 और दूसरा कार्ड बनाएं?
 – 
Bram Vanbilsen
19 जून 2017, 19:23
1. नहीं. आप इसके ऊपर एक कॉलम की मदद से चीज़ें रख सकते हैं. लेकिन अगर आप उन्हें स्क्रॉल करना चाहते हैं, तो SliverGridDelegateWithFixedCrossAxisCount सही विकल्प नहीं है। आप अपना खुद का ग्रिड प्रतिनिधि लिखने में सक्षम हो सकते हैं, या कॉलम-एंड-रो दृष्टिकोण का उपयोग कर सकते हैं। 2. कॉलम पूर्णांक या तो 0 या 1 . होगा
 – 
Collin Jackson
19 जून 2017, 19:57
समझ लिया! लेकिन मुझे अभी भी सूचीदृश्य दृष्टिकोण के साथ समस्या है। कार्डों को छोटे तरीके से प्रदर्शित किया जाता है, ठीक वैसे ही जैसे प्रारंभिक पोस्ट में चित्र में दिखाया गया है। हालांकि अब कोई लाल सीमा नहीं है।
 – 
Bram Vanbilsen
19 जून 2017, 20:05
अपने आइटम का विस्तार करें। 20.0 बहुत छोटा है।
 – 
Collin Jackson
19 जून 2017, 22:38