Flutter中用ListView嵌套GridView报错异常

flutter中的ListView组件和GridView组件都是经常使用的布局组件,有时候ListView中须要嵌套GridView来使用,例以下图:javascript

这种状况就须要在ListView里面再嵌套一个GridView用于排放图片等信息,先来看一下GridView一些经常使用的参数java

GridView.count(
  crossAxisCount: 3,                            // 每行显示多少个
  crossAxisSpacing: 1.5,                        // 横轴网格间距
  mainAxisSpacing: 1.5,                         // 纵轴网格间距
  childAspectRatio: 11/16,                      // 网格比例
)

在GridView中的元素没法设置其宽高,主要经过childAspectRatio来设置其比例,经过比例来显示其大小。

在项目中若是直接使用ListView嵌套GridView进行布局,其会出现报错异常,例以下面异常:app

I/flutter ( 5969): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter ( 5969): The following assertion was thrown during performResize():
I/flutter ( 5969): Vertical viewport was given unbounded height.
I/flutter ( 5969): Viewports expand in the scrolling direction to fill their container.In this case, a vertical
I/flutter ( 5969): viewport was given an unlimited amount of vertical space in which to expand. This situation
I/flutter ( 5969): typically happens when a scrollable widget is nested inside another scrollable widget.
I/flutter ( 5969): If this widget is always nested in a scrollable widget there is no need to use a viewport because
I/flutter ( 5969): there will always be enough vertical space for the children. In this case, consider using a Column
I/flutter ( 5969): instead. Otherwise, consider using the "shrinkWrap" property (or a ShrinkWrappingViewport) to size
I/flutter ( 5969): the height of the viewport to the sum of the heights of its children.

  

出现这种状况可在GridView中设置shrinkWrap:true便可解决:ide

GridView.count(
  shrinkWrap:true,                              // 处理listview嵌套报错
),

  

此时有可能出现手指在GridView区域滑动时ListView没法进行滚动,处理该问题可在GridView中设置physics: NeverScrollableScrollPhysics()来处理:布局

GridView.count(
  physics: NeverScrollableScrollPhysics(),      // 处理GridView中滑动父级Listview没法滑动
)
相关文章
相关标签/搜索