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. JavaScript--常用对象的属性及方法(1)

    1.Number对象(基本数据类型) Number对象的方法大多是一些强制转换方法,如果转换失败返回NaN,以下举例中用number来代替具体数字: *console.log在控制台输出(键盘F12可 ...

  2. JS 知识图

  3. sql 给相同属性的数据排序

    UPDATE b SET OrderIndex = a.OrderIndex FROM ( SELECT RTRIM(ROW_NUMBER() OVER ( PARTITION BY [ItemID] ...

  4. el-table——可编辑拖拽转换csv格式的表格

    <!--可拖拽的表格:表格内容+行参数+按钮名称(对话框标题)--> <template> <div> <el-button size="mini& ...

  5. 浅谈JAVA继承关系中的构造函数

    话不多说直接上例子,我的例子中定义了两个类,TheSon和TheFather,TheSon继承了TheFather,如图: TheSon类的定义: ​ TheFather类的定义: 当我们初始化The ...

  6. web容器(weblogic、resin、tomcat、jboss对比)

    WebLogic 12c Linux静默安装 weblogic11g 密码忘记解决方案 glassfish和tomcat各自的优势和劣势 Linux Resin4.0 安装配置(优质) 对比 . we ...

  7. Django drf:cbv(class base view)源码分析

    cbv是基于类的视图 # 首先要在路由层配置: # 找到类绑定方法as_view # 点开dispatch的方法 # http_method_names其实就是方法的列表 整个流程: 1.写一个基于类 ...

  8. SignalR的三个Demo

    一.理解SignalR ASP .NET SignalR 是一个ASP .NET 下的类库,可以在ASP .NET 的Web项目中实现实时通信(即:客户端(Web页面)和服务器端可以互相实时的通知消息 ...

  9. Week08_day01 (Hive实现按照指定格式输出每七天的消费平均数)

    Hive实现按照指定格式输出每七天的消费平均数 数据准备 2018/6/1,10 2018/6/2,11 2018/6/3,11 2018/6/4,12 2018/6/5,14 2018/6/6,15 ...

  10. 前端与SQL

    转载自:http://developer.51cto.com/art/201706/542163.htm