上篇儲值頁面中有使用到 GridView 不過好像沒特別說明使用的方法，所以今天就來補充紀錄一下它的使用方式，會大致分享下裡面提供的屬性有哪些功能，然後再簡單做個示範，希望未來的自己忘記怎麼用的時候看到這篇就能立刻回憶起來。

GridView

用來生成二維可以滑動的 Widget 列表

預設建構式如下

  GridView({
    Key key,
    Axis scrollDirection = Axis.vertical,
    bool reverse = false,
    ScrollController controller,
    bool primary,
    ScrollPhysics physics,
    bool shrinkWrap = false,
    EdgeInsetsGeometry padding,
    @required this.gridDelegate,
    bool addAutomaticKeepAlives = true,
    bool addRepaintBoundaries = true,
    bool addSemanticIndexes = true,
    double cacheExtent,
    List<Widget> children = const <Widget>[],
    int semanticChildCount,
  })

• scrollDirection : 列表滾動方向，支持 Axis.horizontal, Axis.vertical,
• reverse : 列表示否倒序
• controller : 屬於 ScrollController 用於控制和監聽滾動狀態
• primary : 當無足夠內容時是否可以滾動
• physics : 控制滾動時的樣式
• shrinkWrap : 畫面內容是否只佔用需要的大小
• padding : widget 四邊的填充
• gridDelegate : 用來設定sub widget 的佈局
  • SliverGridDelegateWithFixedCrossAxisCount : 創建一個在橫軸上具有固定數量的圖塊的佈局。
    childAspectRatio : 寬高比
    crossAxisSpacing : 交叉軸之間間隔
    crossAxisCount : 交叉軸數
    mainAxisSpacing: 主軸間隔
  • SliverGridDelegateWithMaxCrossAxisExtent :使用具有最大跨軸範圍的圖塊創建佈局。
    childAspectRatio : 寬高比
    crossAxisSpacing : 交叉軸之間間隔
    mainAxisSpacing : 主軸之間間隔
    maxCrossAxisExtent : 平均畫分後最大範圍的值
• addAutomaticKeepAlives : 當 widget 離開畫面時是否被回收
• addRepaintBoundaries : 當滑動時是否要求重新繪製
• addSemanticIndexes : 支持無障礙語意
• cacheExtent : 緩存區延伸
• children : sub widget 可以存放 List
• semanticChildCount : sub Widget 總數，如果為無限或未知應設定為 null