วิวพอร์ตแนวตั้งได้รับความสูงที่ไม่ถูกผูกไว้

Question 1

นี่คือรหัสของฉัน:

  @override
  Widget build(BuildContext context) {
    return new Material(
      color: Colors.deepPurpleAccent,
      child: new Column(
       mainAxisAlignment: MainAxisAlignment.center,
          children:<Widget>[new GridView.count(crossAxisCount: _column,children: new List.generate(_row*_column, (index) {
            return new Center(
                child: new CellWidget()
            );
          }),)]
      )
    );
  }

ข้อยกเว้นดังนี้:

I/flutter ( 9925): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter ( 9925): The following assertion was thrown during performResize():
I/flutter ( 9925): Vertical viewport was given unbounded height.
I/flutter ( 9925): Viewports expand in the scrolling direction to fill their container.In this case, a vertical
I/flutter ( 9925): viewport was given an unlimited amount of vertical space in which to expand. This situation
I/flutter ( 9925): typically happens when a scrollable widget is nested inside another scrollable widget.
I/flutter ( 9925): If this widget is always nested in a scrollable widget there is no need to use a viewport because
I/flutter ( 9925): there will always be enough vertical space for the children. In this case, consider using a Column
I/flutter ( 9925): instead. Otherwise, consider using the "shrinkWrap" property (or a ShrinkWrappingViewport) to size
I/flutter ( 9925): the height of the viewport to the sum of the heights of its children.
I/flutter ( 9925): 
I/flutter ( 9925): When the exception was thrown, this was the stack:
I/flutter ( 9925): #0      RenderViewport.performResize.<anonymous closure> (package:flutter/src/rendering/viewport.dart:827:15)
I/flutter ( 9925): #1      RenderViewport.performResize (package:flutter/src/rendering/viewport.dart:880:6)
I/flutter ( 9925): #2      RenderObject.layout (package:flutter/src/rendering/object.dart:1555:9)

Question 2

การเพิ่มสองบรรทัดนี้

ListView.builder(
    scrollDirection: Axis.vertical,
    shrinkWrap: true,
...

Question 3

สิ่งนี้มักเกิดขึ้นเมื่อคุณพยายามใช้ a ListView/ GridViewinside a Columnมีหลายวิธีในการแก้ปัญหาฉันมีรายชื่ออยู่ไม่กี่ที่นี่

ห่อListViewในExpanded

Column(
  children: <Widget>[
    Expanded( // wrap in Expanded
      child: ListView(...),
    ),
  ],
)

ห่อListViewในSizedBoxและให้ล้อมรอบheight

Column(
  children: <Widget>[
    SizedBox(
      height: 400, // fixed height
      child: ListView(...),
    ),
  ],
)

ใช้shrinkWrap: trueในListView.

Column(
  children: <Widget>[
    ListView(
      shrinkWrap: true, // use this
    ),
  ],
)

Question 4

ดังนั้นทุกคนจึงโพสต์คำตอบ แต่ไม่มีใครสนใจที่จะอธิบายว่าทำไมฉันจะคัดลอกเอกสารเกี่ยวกับshrinkWrap:

ขอบเขตของมุมมองการเลื่อนใน [scrollDirection] ควรถูกกำหนดโดยเนื้อหาที่กำลังดูอยู่หรือไม่

หากมุมมองแบบเลื่อนไม่หดตัวมุมมองแบบเลื่อนจะขยายเป็นขนาดสูงสุดที่อนุญาตใน [scrollDirection] หากมุมมองการเลื่อนมีข้อ จำกัด ที่ไม่ถูกผูกไว้ใน [scrollDirection] ดังนั้น [shrinkWrap] จะต้องเป็นจริง

การย่อขนาดเนื้อหาของมุมมองการเลื่อนมีราคาแพงกว่าการขยายเป็นขนาดสูงสุดที่อนุญาตอย่างมากเนื่องจากเนื้อหาสามารถขยายและหดตัวระหว่างการเลื่อนซึ่งหมายความว่าขนาดของมุมมองการเลื่อนจะต้องได้รับการคำนวณใหม่ทุกครั้งที่ตำแหน่งการเลื่อนเปลี่ยนไป

ค่าเริ่มfalseต้นเป็น

ดังนั้นการใช้คำศัพท์ของเอกสารสิ่งที่เกิดขึ้นที่นี่คือเราListViewอยู่ในสถานการณ์ของข้อ จำกัด ที่ไม่มีขอบเขต (ในทิศทางที่เรากำลังเลื่อน) ดังนั้นListViewจะบ่นว่า:

... วิวพอร์ตแนวตั้งได้รับพื้นที่แนวตั้งไม่ จำกัด จำนวนที่จะขยาย

เพียงแค่ตั้งค่าshrinkWrapเป็นtrueจะทำให้แน่ใจว่าขนาดที่กำหนดโดยเนื้อหา โค้ดตัวอย่างเพื่อแสดง:

// ...
  ListView(
    // Says to the `ListView` that it must wrap its
    // height (if it's vertical) and width (if it's horizontal).
    shrinkWrap: true,
  ),
// ...

นั่นคือสิ่งที่เกิดขึ้นกับรหัสของคุณอย่างไรก็ตามข้อเสนอแนะของ @ Rémiดีที่สุดสำหรับกรณีนี้โดยใช้Alignแทนไฟล์Column.

Question 5

วางมุมมองกริดไว้ในวิดเจ็ตแบบยืดหยุ่นหรือแบบขยาย

return new Material(
    color: Colors.deepPurpleAccent,
    child: new Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children:<Widget>[
         Flexible(
          child:  GridView.count(crossAxisCount: _column,children: new List.generate(_row*_column, (index) {
          return new Center(
             child: new CellWidget(),
          );
        }),))]
    )
);

Question 6

โดยทั่วไปสถานการณ์นี้จะเกิดขึ้นเมื่อวิดเจ็ตแบบเลื่อนได้ซ้อนอยู่ภายในวิดเจ็ตที่เลื่อนได้อื่น

ในกรณีของฉันฉันใช้ GridView ภายในคอลัมน์และข้อผิดพลาดนั้นเกิดขึ้น

วิดเจ็ต GridView มีshrinkWrapคุณสมบัติ / พารามิเตอร์ที่ตั้งชื่อเพื่อตั้งค่าว่าtrueปัญหาของฉันได้รับการแก้ไขแล้ว

GridView.count(
  shrinkWrap: true,
  // rest of code
)

Question 7

อย่าใช้Columnสำหรับการจัดตำแหน่งลูกคนเดียว ใช้Alignแทน

    new Align(
      alignment: Alignment.topCenter,
      child: new GridView(),
    )

Question 8

แม้ว่าshrinkWrapจะทำสิ่งนั้น แต่คุณไม่สามารถเลื่อนเข้าListViewมาได้

หากคุณต้องการฟังก์ชันการเลื่อนคุณสามารถเพิ่มphysicsคุณสมบัติ:

ListView.builder(
    scrollDirection: Axis.vertical,
    shrinkWrap: true,
    physics: ScrollPhysics(),
...

Question 9

คำตอบนี้อ้างอิงจากทางเหนือของ @CopsOnRoad

สิ่งนี้เกิดขึ้นเนื่องจากListView/GridViewวิดเจ็ตไม่มีพาเรนต์ที่จะรับขนาดดังนั้นความสูงจึงไม่สิ้นสุดและเนื่องจากการกระพือไม่ทราบความสูงของ ListView และไม่สามารถแสดงผลได้

แนวทางที่หนึ่ง: ความสูงคงที่

ห่อด้วยContainerหรือSizedBoxเพื่อเขียนความสูงตาย
```
Column(
  children: <Widget>[
    SizedBox(
     height: 400, // fixed height
    child: ListView(...),
   ),
 ],
)
```

ไม่เป็นไร แต่ถ้าต้องปรับความสูงก็จะใช้ไม่ได้ถ้าคุณเขียน

แนวทางที่สอง: shrinkWrap: true

ลองshrinkWrap: trueด้วยphysics: ScrollPhysics()สำหรับการเลื่อน

shrinkWrap: truewrap_contentเป็นบิตเช่นในหุ่นยนต์
```
ListView.builder(
   scrollDirection: Axis.vertical,
   shrinkWrap: true,
   physics: ScrollPhysics()
...
```

อย่างไรก็ตามหลังจากรวบรวมแล้วคุณจะพบคำเตือนสีเหลืองยาว ๆ ที่ด้านล่างของหน้า

เลยยังไม่ได้

แนวทางที่สาม: ขยายหรือยืดหยุ่น

Flexible เป็นรูปแบบที่ยืดหยุ่นในการกระพือปีกเทียบเท่ากับ LinearLayout ใน Android

มีหนึ่งรายการในflexแอตทริบิวต์Flexible The ซึ่งเท่ากับ layout_weight จะใช้พื้นที่ที่เหลือทั้งหมด

ดังนั้นเราสามารถรวม ListView ด้วย Flexible
```
Column(
  children: <Widget>[
    Expanded( 
      child: ListView(...),
    ),
  ],
)
```

คำตอบนี้อ้างอิง: วิวพอร์ตแนวตั้งได้รับความสูงที่ไม่ถูกผูกไว้

Question 10

ทดสอบสิ่งนี้สำหรับมุมมองรายการที่สอง

ListView.builder(
            physics: NeverScrollableScrollPhysics(),

Question 11

มีวิดเจ็ตที่เรียกว่า Center ควรช่วยให้คุณบรรลุสิ่งที่คุณต้องการทำ (จัดกึ่งกลางในแนวตั้ง) เอกสารอย่างเป็นทางการสำหรับวิดเจ็ต Center