在做移动端的时候, 很多时候会需要下图所示的需求,如图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都有一样的属性;
在移动端开发中,为实现美团外卖首页类似效果,需用Container包裹GridView。通过设置GridView的shrinkWrap属性为true,使Container能根据内容动态调整高度。然而,这会导致局部滚动,通过设定physics:NeverScrollableScrollPhysics()可消除此滚动,实现全屏滚动的效果。
2765

被折叠的 条评论
为什么被折叠?



