# Flutter GridView介紹
可滾動的小物件，提供水平及垂直滾動，ListView 基本上是以線性排列元件，如果想以網格的方式排列元件，並具有捲動效果則可以使用GridView，
* SliverGridDelegateWithFixedCrossAxisCount
提供了 cross axis 方向上固定元素的排列，藉由`crossAxisCount`進行設定，另外透過設定`childAspectRatio `也可以設定元件的緊密度，數值越大越緊密。

    void main() {
      runApp(
        MaterialApp(
          home: Scaffold(
            appBar: AppBar(title: Text('Openhome.cc')),
            body: GridView(
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2,
                childAspectRatio: 1
              ),
              children: demoChildren(32)
            )
          )
        )
      );
    }


* SliverGridDelegateWithMaxCrossAxisExtent

## 添加滾動監聽事件
假設需求為置底及置頂需進行print
* 將狀態改為 StatefulWidget
* init

    late ScrollController _controller;

    @override
    void initState() {
        super.initState();
        _controller = ScrollController();
        _controller.addListener(_scrollListener);
    }

* dispose

    @override
    void dispose() {
        _controller.removeListener(_scrollListener);
        super.dispose();
    }

* ListView添加監聽

    ListView(
      controller: _controller,
        scrollDirection: Axis.vertical,
        children: []
    )

## GridView.builder()
### 簡介
通常用於異步獲取數據源時，GridView.builder必須指定的參數有兩個：

GridView.builder(
 ...
 required SliverGridDelegate gridDelegate, 
 required IndexedWidgetBuilder itemBuilder,
)

### 程式範例

class InfiniteGridView extends StatefulWidget {
  @override
  _InfiniteGridViewState createState() => _InfiniteGridViewState();
}

class _InfiniteGridViewState extends State<InfiniteGridView> {
  List<IconData> _icons = []; //保存Icon數據

  @override
  void initState() {
    super.initState();
    // 初始化
    _retrieveIcons();
  }

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 3, //每行三列
        childAspectRatio: 1.0, //長寬比
      ),
      itemCount: _icons.length,
      itemBuilder: (context, index) {
        //如果顯示到最後一個並且Icon總數小於200時繼續再入數據
        if (index == _icons.length - 1 && _icons.length < 200) {
          _retrieveIcons();
        }
        return Icon(_icons[index]);
      },
    );
  }

  //模擬異步獲取數據
  void _retrieveIcons() {
    Future.delayed(Duration(milliseconds: 200)).then((e) {
      setState(() {
        _icons.addAll([
          Icons.ac_unit,
          Icons.airport_shuttle,
          Icons.all_inclusive,
          Icons.beach_access,
          Icons.cake,
          Icons.free_breakfast,
        ]);
      });
    });
  }
}

## GridView.count()
## GridView.custom()
## GridView.extent()

## 參考資料
1. https://openhome.cc/Gossip/Flutter/GridView.html

###### tags: `flutter`