经测试发现,这个属性意思是副轴的最大长度,因为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: <Widget>[
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),
),
],
),
);
}
}
效果图: