Khung nhìn dọc được cung cấp chiều cao không giới hạn

Đây là mã của tôi:

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

Ngoại lệ như sau:

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)

Thêm hai dòng này

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

Điều này thường xảy ra khi bạn cố gắng sử dụng a ListView/ GridViewbên trong a Column, có nhiều cách để giải quyết nó, tôi liệt kê một vài cách ở đây.

1. Quấn ListViewvàoExpanded

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

2. Bọc ListViewtrong SizedBoxvà đưa ra một bị chặnheight

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

3. Sử dụng shrinkWrap: truetrong ListView.

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

Vì vậy, mọi người đã đăng câu trả lời nhưng không ai quan tâm giải thích tại sao: Tôi sẽ sao chép tài liệu về shrinkWrap:

Liệu mức độ của chế độ xem cuộn trong [scrollDirection] có nên được xác định bởi nội dung được xem hay không.

Nếu chế độ xem cuộn không thu nhỏ phần bọc, thì chế độ xem cuộn sẽ mở rộng đến kích thước tối đa cho phép trong [scrollDirection]. Nếu dạng xem cuộn có các ràng buộc không bị ràng buộc trong [scrollDirection], thì [scrollWrap] phải là true.

Thu nhỏ gói nội dung của chế độ xem cuộn đắt hơn đáng kể so với việc mở rộng đến kích thước tối đa cho phép vì nội dung có thể mở rộng và co lại trong quá trình cuộn, có nghĩa là kích thước của chế độ xem cuộn cần được tính toán lại bất cứ khi nào vị trí cuộn thay đổi.

Mặc định là false.

Vì vậy, lấy từ vựng của các tài liệu, điều đang xảy ra ở đây là chúng ta ListViewđang ở trong một tình huống bị ràng buộc không giới hạn (theo hướng mà chúng ta đang cuộn), do đó ListViewsẽ phàn nàn rằng:

... một khung nhìn dọc được cung cấp một lượng không gian thẳng đứng không giới hạn để mở rộng.

Chỉ cần đặt shrinkWrapthành truesẽ đảm bảo rằng nó bao bọc kích thước được xác định bởi nội dung. Một mã mẫu để minh họa:

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

Đó là những gì đang xảy ra với mã của bạn, tuy nhiên, đề xuất @ Rémi là tốt nhất cho trường hợp này, sử dụng Alignthay vì a Column.

đặt chế độ xem lưới bên trong tiện ích Linh hoạt hoặc Mở rộng

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

Tình huống này thường xảy ra khi một tiện ích con có thể cuộn được lồng bên trong một tiện ích con có thể cuộn khác.

Trong trường hợp của tôi, tôi sử dụng GridView bên trong Cột và lỗi đó xảy ra.

GridView widget có shrinkWraptham số thuộc tính / được đặt tên, để đặt nó, truevấn đề của tôi đã được khắc phục.

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

Không sử dụng Columncho căn chỉnh con đơn lẻ. Sử dụng Alignthay thế.

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

Mặc dù shrinkWraplàm điều đó, nhưng bạn không thể cuộn vào ListView.

Nếu bạn muốn có chức năng cuộn, bạn có thể thêm thuộc physicstính:

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

điều này xảy ra bởi vì ListView/GridViewtiện ích con không có cha mẹ để lấy kích thước của nó, vì vậy chiều cao của nó là vô hạn và sự thay đổi đó không biết chiều cao của ListView và không thể hiển thị.

1. Giải pháp một: chiều cao cố định

   Gói nó trực tiếp với Containerhoặc SizedBoxđể viết chiều cao chết.

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

Cái này cũng được, nhưng nếu chiều cao cần thích ứng, nếu ghi thì không được.

2. Giải pháp hai: co lại

   Hãy thử shrinkWrap: truevới physics: ScrollPhysics()để cuộn

   shrinkWrap: truehơi giống trong android wrap_content.

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

Tuy nhiên, sau khi biên dịch, bạn sẽ thấy một cảnh báo dài màu vàng ở cuối trang.

Vì vậy, vẫn không thể

3. Giải pháp ba: Mở rộng hoặc Linh hoạt

   Flexible Là một cách bố trí linh hoạt theo kiểu vẩy, tương đương với LinearLayout trong android.

   Có một trong Linh hoạt flexThuộc tính, bằng layout_weight, chiếm tất cả không gian còn lại.

   Vì vậy, chúng ta có thể bọc ListView bằng Linh hoạt.

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

Câu trả lời này dựa trên: Khung nhìn dọc được cung cấp chiều cao không giới hạn.

kiểm tra cái này cho lần xem danh sách thứ hai

ListView.builder(
            physics: NeverScrollableScrollPhysics(),

Có một tiện ích được gọi là Trung tâm. Nó sẽ giúp bạn đạt được những gì bạn muốn làm (căn giữa nó theo chiều dọc). Tài liệu chính thức cho tiện ích con Trung tâm