Flutter中使用AlignedGridView、GridView、ListView等组件导致的溢出问题

Flutter中使用AlignedGridView、GridView、ListView等组件导致的溢出问题

问题复现

报错信息如下

The following assertion was thrown during layout:
A RenderFlex overflowed by 189 pixels on the bottom.

The relevant error-causing widget was: 
  Column Column:file:///D:/DartProject/yqplaymusic/lib/components/CoverRow.dart:138:9
The overflowing RenderFlex has an orientation of Axis.vertical.
The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and black striped pattern. This is usually caused by the contents being too big for the RenderFlex.

Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the RenderFlex to fit within the available space instead of being sized to their natural size.
This is considered an error condition because it indicates that there is content that cannot be seen. If the content is legitimately bigger than the available space, consider clipping it with a ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex, like a ListView.

The specific RenderFlex in question is: RenderFlex#9b9fb OVERFLOWING
...  needs compositing
...  parentData: offset=Offset(0.0, 0.0) (can use size)
...  constraints: BoxConstraints(w=215.5, h=95.0)
...  size: Size(215.5, 95.0)
...  direction: vertical
...  mainAxisAlignment: start
...  mainAxisSize: max
...  crossAxisAlignment: start
...  textDirection: ltr
...  verticalDirection: down
====================================================================================================

问题产生原因

通常情况下，这是由于我们在使用的不确定宽度或者高度的组件，比如使用了Row 、Column 、ListView 、GridView 等这些组件，然后子组件里面又接着使用不确定宽高的组件，然后就会导致有时候无法正确计算组件的高度，会短暂出现异常现象，随后又会显示正常

解决方法

在子组件中，如ListView，将Row 或 Column使用ListView替换，并设置你想要的方向，如

        ListView(
          shrinkWrap: true,
          scrollDirection: Axis.vertical,
          physics: const NeverScrollableScrollPhysics(),
          children: [],
          )

需要注意的是，要将shrinkWrap属性设置为true，这样子ListView才能自动计算子组件的大小