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. 03 Django之视图函数

    一.Django的视图函数view 一个视图函数(类),简称视图,是一个简单的Python函数(类),它接受WEB请求并返回Web响应. 响应可以是一张网页的HTML内容,一个重定向,一个404错误, ...

  2. MVC,MVP 和 MVVM 的图示(原理)

    一.MVC MVC模式的意思是,软件可以分成三个部分. 视图(View):用户界面. 控制器(Controller):业务逻辑 模型(Model):数据保存 各部分之间的通信方式如下. View 传送 ...

  3. flex布局实战

    1.实现盒子的水平垂直居中 .parent{ width:200px; height:200px; display:flex; align-items: center; justify-content ...

  4. 使用vs编写arduino项目

    说实话,arduino官方自带的编辑器有时候用的真不爽.所以直接使用vs开发arduino项目,用起来真爽,一直使用一直爽. 不多废话,直接上图,三部曲结束,搞定,收工. 我用的是vs2015版本的. ...

  5. Vant UI 组件库如何做rem适配?

    Vant是一款移动端基于vue的组件库,V2.1.1版本非常棒.文档地址:https://youzan.github.io/vant/?source=vuejsorg#/zh-CN/intro,那么V ...

  6. linux实操_shell运算符

    1."$((运算式))"或"[运算式]" 2.expr m + n 注意:expr运算符要有空格 3.expr m - n 4.expr \*,/,/% 乘,除 ...

  7. MGR测试及搭建

    一.部署规划:本次布署使用单机多实例进行basedir: /usr/local/mysql端口号 数据目录 group_repplication通信端口3306 /data/mysql/mysql_3 ...

  8. tp5.1下redis配置和使用

    //1.config目录下新建redis.php <?php /** * Created by PhpStorm. * User: Administrator * Date: 2019/12/1 ...

  9. idea 设置 maven 默认位置

    在 idea 中创建 maven 项目 每次都要修改掉 默认的maven位置,觉得很烦.... 所以这边篇博客就是专门解决掉这个麻烦精的......(233333) 首先   File --> ...

  10. Python中的猴子补丁

    monkey patch指的是在运行时动态替换,一般是在startup的时候.用过gevent就会知道,会在最开头的地方gevent.monkey.patch_all();把标准库中的thread/s ...