flutter-GridView與wrap使用心得

GridView有2種gridDelegate；

• [記錄小嵌套衝突的問題，SingleChildScrollView，ListView,GrilView嵌套問題解決，子佈局添加屬性]

  physics: NeverScrollableScrollPhysics(),
  shrinkWrap: true,

---

1. SliverGridDelegateWithMaxCrossAxisExtent：
   沒有固定行數，這種類似於wrap,可以自動換行，佈局適配性較好

 return GridView.builder(
     // physics: NeverScrollableScrollPhysics(),
      //shrinkWrap: true,
      padding: const EdgeInsets.all(0.0),
      gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
        //單個widget的水平最大寬度
        maxCrossAxisExtent: 110,
        //垂直單個子widget間距
        mainAxisSpacing: 4,
        //水平單個子widget間距
        crossAxisSpacing: 4,
        //item寬高比例
        childAspectRatio: 1.0
      ),
      itemBuilder: (context, index) {
          return Image.file(_imageFileList[index], fit: BoxFit.fill);
      },
      itemCount: _imageFileList.length,
    );

2. SliverGridDelegateWithFixedCrossAxisCount
   固定行數，這種相比第一種，固定了item寬高比，適配起來比較麻煩

  return GridView.builder(
      padding: const EdgeInsets.all(0.0),
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          //橫軸元素個數
          crossAxisCount: 3,
          //垂直單個子widget間距
          mainAxisSpacing: 4,
          //水平單個子widget間距
          crossAxisSpacing: 4,
          //item寬高比例
          childAspectRatio: 1.0),
      itemBuilder: (context, index) {
          return Image.file(_imageFileList[index], fit: BoxFit.fill);
      },
      itemCount: _imageFileList.length,
    );

3. wrap部分地方也是可代替GrildView來進行使用的，並且它的佈局適配性也是很nice的，不過並不能替代，GridView可以根據index更好的去添加頭部，尾部；在slivers下也使用不了，只能使用對應的SliverGrid，SliverList;使用上沒什麼好說的，一搜一大堆；

Wrap(
  spacing: 8.0, // gap between adjacent chips
  runSpacing: 4.0, // gap between lines
  children: <Widget>[
    Chip(
      avatar: CircleAvatar(
          backgroundColor: Colors.blue.shade900, child: new Text('AH', style: TextStyle(fontSize: 10.0),)),
      label: Text('Hamilton'),
    ),
    Chip(
      avatar: CircleAvatar(
          backgroundColor: Colors.blue.shade900, child: new Text('ML', style: TextStyle(fontSize: 10.0),)),
      label: Text('Lafayette'),
    ),
    Chip(
      avatar: CircleAvatar(
          backgroundColor: Colors.blue.shade900, child: new Text('HM', style: TextStyle(fontSize: 10.0),)),
      label: Text('Mulligan'),
    ),
    Chip(
      avatar: CircleAvatar(
          backgroundColor: Colors.blue.shade900, child: new Text('JL', style: TextStyle(fontSize: 10.0),)),
      label: Text('Laurens'),
    ),
  ],
)