在做移動端的時候, 很多時候會需要下圖所示的需求,如圖 自己所示：
先進行需求分析, 這個模塊可以設計成Container包含GridView, ?GridView中子內(nèi)容個數(shù)由后臺數(shù)據(jù)控制, 但是在直接寫Container包含GridView控件時會出現(xiàn) "Failed assertion: line 1920 pos 12: 'hasSize'" 有關的錯誤, 如果直接給Container一個高度的話, 又不滿足我們的需求.
我們想要的結果是由數(shù)據(jù)控制GridView的個數(shù), 而Container大小跟隨GridView個數(shù)的變化而變化, 而不去直接設置Container的大小,?
因此,我們點開GridView的api發(fā)現(xiàn), 有一個shrinkWrap屬性, ?設置shrinkWrap:true即可, 運行一下即可達到效果, 但是又會發(fā)現(xiàn)另一個問題, 雖然Container大小可以自適應了, 但是里面的內(nèi)容又會在局部進行滾動, 而我們的想法是想讓內(nèi)容在整個屏幕中滾動, 并沒有局部滾動的效果, 因此, 我們設置另一個屬性physics: NeverScrollableScrollPhysics()
總結：
在GridView.builder中添加
Container跟隨GridView內(nèi)容變化高度： shrinkWrap:true,? ??
取消滾動效果： physics:NeverScrollableScrollPhysics(),
_morePicContiner() {
return Container(
????padding:EdgeInsets.all(10),
? ? color: Colors.black12,
? ? child:GridView.builder(
????????///Container跟隨GridView內(nèi)容變化高度, shrinkWrap:true;
? ? ? ? shrinkWrap:true,
? ? ? ? ///取消滾動效果physics: NeverScrollableScrollPhysics();
? ? ? ? physics:NeverScrollableScrollPhysics(),
? ? ? ? itemCount:list.length,
? ? ? ? ///SliverGridDelegateWithFixedCrossAxisCount 構建一個橫軸固定數(shù)量Widget
? ? ? ? gridDelegate:SliverGridDelegateWithFixedCrossAxisCount(
????????????///橫軸元素個數(shù)
? ? ? ? ? ? crossAxisCount:3,
? ? ? ? ? ? ///縱軸間距
? ? ? ? ? ? mainAxisSpacing:5,
? ? ? ? ? ? ///橫軸間距
? ? ? ? ? ? crossAxisSpacing:5,
? ? ? ? ? ? ///子組件寬高長度比例
? ? ? ? ? ? // childAspectRatio: 1.0
? ? ? ? ),
? ? ? ? itemBuilder: (BuildContext context, int position) {
????????????return __createGridViewItems(position);? //布局樣式自己定義
? ? ? ? }
? ? ),
? );
}
