網格列表組件（GridView）

數據量很大時用矩陣方式排列比較清晰，此時用網絡列表組件，即爲GridView組件，可以實現多行多列的應用場景。使用GridView創建網絡列表有多種方式：

GridView.count通過單行展示個數創建GridView。

GridView.extent通過最大寬度創建GridView。

組件屬性及描述：

屬性名	類型	默認值	說明
scrollDirection	Axis	Axis.vertical	滾動的方向，有垂直和水平兩種，默認爲垂直方向
reverse	bool	fase	默認是從上或者左向下或者右滾動的，這個屬性控制是否反向，默認值爲false，即不反向滾動
controller	ScrollController		控制child滾動時候的位置
primary	bool		是否是與父節點的PrimaryScrollController所關聯的主滾動視圖
physics	ScrollPhysics		滾動的視圖如何響應用戶的輸入
shrinkWrap	bool	fase	滾動方向的滾動視圖內容是否應該由正在查看的內容所決定
padding	EdgeInsetsGeometry		四周的空白區域
GridDelegate	SliverGridDelegate		控制GridView中子節點佈局的delegate
CacheExtent	double		緩存區域
crossAxisSpacing	double		水平子Widget之間間距
mainAxisSpacing	double		垂直子Widget之間間距
crossAxisCount	int		一行的Widget數量
childAspectRatio	double		子Widget寬高比例

寫法一：GridView.count

GridView.count(
      //水平子Widget之間間距
      crossAxisSpacing: 10.0,
      //垂直子Widget之間間距
      mainAxisSpacing: 30.0,
      //GridView內邊距
      padding: EdgeInsets.all(10.0),
      //一行的Widget數量
      crossAxisCount: 2,
      //子Widget寬高比例
      childAspectRatio: 2.0,
      //子Widget列表
      children: <Widget>[
         //組件集       
              ],
     );

寫法二：GridView.builder

@override
  Widget build(BuildContext context) {
    List<String> datas = getDataList();
    return GridView.builder(
        itemCount: datas.length,
        //SliverGridDelegateWithFixedCrossAxisCount 構建一個橫軸固定數量Widget
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          //橫軸元素個數
            crossAxisCount: 3,
            //縱軸間距
            mainAxisSpacing: 20.0,
            //橫軸間距
            crossAxisSpacing: 10.0,
            //子組件寬高長度比例
            childAspectRatio: 1.0),
        itemBuilder: (BuildContext context, int index) {
          //Widget Function(BuildContext context, int index)
          return getItemContainer(datas[index]);
        });
  }

Widget getItemContainer(String item) {
    return Container(
      width: 5.0,
      height: 5.0,
      alignment: Alignment.center,
      child: Text(
        item,
        style: TextStyle(color: Colors.white, fontSize: 20),
      ),
      color: Colors.blue,
    );
  }

注：對於SliverGridDelegateWithMaxCrossAxisExtent而言，水平方向元素個數不再固定，其水平個數也就是有幾列，由maxCrossAxisExtent和屏幕的寬度以及padding和mainAxisSpacing等決定。

寫法三：GridView.custom()

@override
  Widget build(BuildContext context) {
    List<String> datas = getDataList();
    return GridView.custom(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3, mainAxisSpacing: 10.0, crossAxisSpacing: 20.0, ),
        childrenDelegate: SliverChildBuilderDelegate((context, position) {
          return getItemContainer(datas[position]);
        }, childCount: datas.length));
  }