When working on the mobile terminal, many times you will need the requirements shown in the figure below, as shown in Figure 1. A part of the homepage of Meituan Waimai
First conduct requirement analysis, this module can be designed so that the Container contains GridView, and the number of sub-contents in GridView is controlled by the background data, but when writing directly to the Container to contain the GridView control, there will be an error related to "hasSize", or the GridView will fill the entire screen , and directly giving the Container a height does not meet our needs. The result we want is that the number of GridViews is controlled by the data, and the size of the Container changes with the number of GridViews, instead of directly setting the size of the Container , Therefore, we clicked on the GridView api and found that there is a shrinkWrap attribute, just set shrinkWrap: true, and the effect can be achieved after running it, but another problem will be found, although the size of the Container can be self-adaptive, but the content inside It will scroll locally again, and our idea is to let the content scroll in the entire screen without the effect of partial scrolling, so we set another property physics: NeverScrollableScrollPhysics().
Summarize:
1. Container changes height following GridView content, shrinkWrap:true;
2. Cancel the scrolling effect physics: NeverScrollableScrollPhysics();
3. Both GridView and ListView have the same properties;