Flutter设置Container的高度随ListView或者GridView

在移动端开发中,为实现美团外卖首页类似效果,需用Container包裹GridView。通过设置GridView的shrinkWrap属性为true,使Container能根据内容动态调整高度。然而,这会导致局部滚动,通过设定physics:NeverScrollableScrollPhysics()可消除此滚动,实现全屏滚动的效果。

在做移动端的时候, 很多时候会需要下图所示的需求,如图1美团外卖首页的一部分

先进行需求分析, 这个模块可以设计成Container包含GridView,  GridView中子内容个数由后台数据控制, 但是在直接写Container包含GridView控件时会出现 "hasSize" 有关的错误, 或者GridView会布满整个屏幕, 而直接给Container一个高度的话, 又不满足我们的需求.我们想要的结果是由数据控制GridView的个数, 而Container大小跟随GridView个数的变化而变化, 而不去直接设置Container的大小, 因此,我们点开GridView的api发现, 有一个shrinkWrap属性,  设置shrinkWrap:true即可, 运行一下即可达到效果, 但是又会发现另一个问题, 虽然Container大小可以自适应了, 但是里面的内容又会在局部进行滚动, 而我们的想法是想让内容在整个屏幕中滚动, 并没有局部滚动的效果, 因此, 我们设置另一个属性physics: NeverScrollableScrollPhysics().

总结:

1. Container跟随GridView内容变化高度, shrinkWrap:true;

2. 取消滚动效果physics: NeverScrollableScrollPhysics();

3. GridView和ListView都有一样的属性; 

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

喜欢听风的人

你的鼓励是我最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值