iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 12
0
Mobile Development

Flutter App 開發實戰系列 第 12

GridView 屬性 [DAY 12]

上篇儲值頁面中有使用到 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

上一篇
來做個儲值頁面吧 [DAY 11]
下一篇
GridView 範例 [DAY 13]
系列文
Flutter App 開發實戰30

尚未有邦友留言

立即登入留言