GridView.extent中maxCrossAxisExtent的作用

经测试发现，这个属性意思是副轴的最大长度，因为GridView的主轴是竖的，所以GridView中该属性指的是最大宽度，如果屏幕是320像素宽，指定为160的时候GridView默认每行显示2个，那如果是150或者170的时候呢？前面说了是最大宽度，当150的时候，每行能放下2个还多一点空间，所以GridView会把每个item缩小然后每行放3个item，如果是170的时候能放1个item还多一点空间，这时候就会缩小这个item的宽度然后放2个item，测试代码如下：

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Test(),
    ),
  );
}

class Test extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var size = MediaQuery.of(context).size;
    print("size.width=${size.width},size.height=${size.height}");
    return Scaffold(
      body: GridView(
        padding: EdgeInsets.zero,
        gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
          maxCrossAxisExtent: 170.0, // 最大副轴长度
          childAspectRatio: 2.0, //副轴除以主轴长度的比例
        ),
        children: [
          Container(
            color: Colors.blue,
            child: Icon(Icons.ac_unit),
          ),
          Container(
            color: Colors.yellow,
            child: Icon(Icons.airport_shuttle),
          ),
          Container(
            color: Colors.red,
            child: Icon(Icons.all_inclusive),
          ),
          Container(
            color: Colors.grey,
            child: Icon(Icons.beach_access),
          ),
          Container(
            color: Colors.blueAccent,
            child: Icon(Icons.cake),
          ),
          Container(
            color: Colors.deepOrange,
            child: Icon(Icons.free_breakfast),
          ),
        ],
      ),
    );
  }
}

效果图：

image.png

相关文章：
https://book.flutterchina.club/chapter6/gridview.html