垂直视口的高度不受限制

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

当您尝试在ListView/GridView内部使用/时，通常会发生这种情况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]必须为true。

收缩包装滚动视图的内容比扩展到最大允许大小要贵得多，因为在滚动过程中内容可以扩展和收缩，这意味着只要滚动位置发生变化，就需要重新计算滚动视图的大小。

默认为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

当可滚动小部件嵌套在另一个可滚动小部件内时，通常会发生这种情况。

在我的情况下，我在Column内使用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用physics: ScrollPhysics()滚动

shrinkWrap: true有点像android的wrap_content。
```
ListView.builder(
   scrollDirection: Axis.vertical,
   shrinkWrap: true,
   physics: ScrollPhysics()
...
```

但是，编译后，您会在页面底部看到一个黄色的长警告。

所以还是不能

解决方案三：扩展或灵活

Flexible 在flutter中是一种灵活的布局，等效于android中的LinearLayout。

Flexible中有一个。flex等于layout_weight的属性会占用所有剩余空间。

因此，我们可以使用Flexible包装ListView。
```
Column(
  children: <Widget>[
    Expanded( 
      child: ListView(...),
    ),
  ],
)
```

基于此答案：垂直视口被赋予无限的高度。

Question 10

测试这个第二个listview

ListView.builder(
            physics: NeverScrollableScrollPhysics(),

Question 11

有一个名为Center的小部件。它应该可以帮助您实现想要做的事情（垂直居中）。中心小部件的官方文档