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

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

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

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

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

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即可解决:

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

  

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

GridView.count(
physics: NeverScrollableScrollPhysics(), // 处理GridView中滑动父级Listview无法滑动
)

  

Flutter中用ListView嵌套GridView报错异常的更多相关文章

  1. 【Android】listview 嵌套gridview报错,代码:”during second layout pass: posting in next frame

    作者:程序员小冰,CSDN博客:http://blog.csdn.net/qq_21376985, QQ986945193 公众号:程序员小冰 说明:本人曾经在listview嵌套gridview出现 ...

  2. android listView嵌套gridview的使用心得

    在开发的过程中可能需要用到listview嵌套gridview的场景,但是在Android中, 不能在一个拥有Scrollbar的组件中嵌入另一个拥有Scrollbar的组件,因为这不科学,会混淆滑动 ...

  3. ScrollView嵌套ListView嵌套GridView的上下拉以及加载更多

    ScrollView 效果 ScrollView 说明 一个ScrollView 嵌套ListView 嵌套GridView的上拉加载更多,下拉刷新的demo. 主要是重写了GridView和Lsit ...

  4. ListView嵌套GridView

    首先,我们通过两个实例来了解下本篇文章所讲的重点,看下图: 微博: 陌陌: 大家应该对这两款软件并不陌生,接下来,我将列举下本文将要实现的几个点: 1.ListView嵌套GridView,互不冲突, ...

  5. ListView嵌套GridView,显示不全解决办法

    ListView嵌套GridView时,遇到了GridView只显示一行,其余都显示不出来的问题,最终解决办法如下: 需要自定义GridView,重新绘制高度即可: public class MyGr ...

  6. ListView嵌套GridView使用详解及注意事项

    ListView嵌套GridView即ListView的每个Item中都包含一个GridView:需要注意的是由于ListView和GridView都是可滑动的控件. 所以需要自定义GridView, ...

  7. Struts2报错异常Method "setUser" failed for object com.mikey.action.ConverterAction@dd34285

    在写类型转换的时候发现报错 异常信息 ognl.MethodFailedException: Method "setUser" failed for object com.mike ...

  8. Android中ListView嵌套GridView的简单消息流UI(解决宽高问题)

    最近搞一个项目,需要用到类似于新浪微博的消息流,即每一项有文字.有九宫格图片,因此这就涉及到ListView或者ScrollView嵌套GridView的问题.其中GridView的高度问题在网上都很 ...

  9. 解决flutter的image_cropper组件引入报错问题

    在使用flutter的图片裁剪组件image_cropper,github:https://github.com/hnvn/flutter_image_cropper 根据它的要求,安卓需要在文件[A ...

随机推荐

  1. 3 webpack 4 加vue 2.0生产环境搭建

    1 在前两篇笔记中已经能把开发环境弄好了,接来下构建他的生产环境 2 使用npm 安装url-loader和file-loader来支持图片和字体 npm install --save-dev url ...

  2. JAVA处理数字与中文数字互转(最大处理数字不超过万兆即:9999999999999999.9999)

    package practice; import java.util.Arrays; /** * 数字与中文数字互转(最大处理数字不超过万兆即:9999999999999999.9999) * @au ...

  3. Image Processing and Analysis_15_Image Registration:Multi-modal volume registration by maximization of mutual information——1996

    此主要讨论图像处理与分析.虽然计算机视觉部分的有些内容比如特 征提取等也可以归结到图像分析中来,但鉴于它们与计算机视觉的紧密联系,以 及它们的出处,没有把它们纳入到图像处理与分析中来.同样,这里面也有 ...

  4. 集成IDE anaconda

    Anaconda 下载安装完anaconda后,会生成如下工具: 安装Anaconda不需要使用管理员权限.安装完毕后,Anaconda附带一个图形启动器(Anaconda Prompt),可以使用他 ...

  5. C++——namespace

    scope和namespace scope就是我们常说的作用域,namespace是C++引入的一个关键字.这两种都和作用域有些微妙的联系,下面 引自Global scope vs global na ...

  6. mysql 创建用户并授权数据库

    create user test identified by ‘password’:password  你要创建的用户对应的密码 grant all on database.*  to  test;  ...

  7. Python——DataFrame转list(包含两种)

    import pandas as pd df = pd.DataFrame({'a':[1,3,5,7,4,5,6,4,7,8,9], 'b':[3,5,6,2,4,6,7,8,7,8,9]}) df ...

  8. Subordinates(贪心)

    题目大意: 一共有N个员工,其中最高领导人是编号s的人,每个人都只有一个直接领导,每个人都说出了自己领导的个数,问最少有几个人撒谎了. 思路: 合理的贪心是该把排最后的数变成缺少的数字,然后继续判断. ...

  9. python c++ 混合编程中python调用c++string返回类型的函数,python中返回为数字的解决办法

    本随笔解决 Python使用ctypes 调用c++dll 字符串返回类型函数,在python中显示为数字:原文解决方案见so: https://stackoverflow.com/questions ...

  10. PL/SQL老是自动断开问题处理

    问题背景:情况是这样的,很多开发同事的plsql上班时间开着8个小时,有时候他们出去抽烟后或者中午吃完饭,回来在plsql上面执行就报错无响应,然后卡住了半天动弹不了,非得重新登录plsql才生效,我 ...