flutter - GridView 网格布局，以及设置子元素的间距和大小

基础的 GridView 布局

参数说明gridDelegate对子元素进行修饰，由于SliverGridDelegate 是一个抽象类， 找它的实现类有 【SliverGridDelegateWithFixedCrossAxisCount，SliverGridDelegateWithMaxCrossAxisExtent,】childAspectRatio子元素列表 SliverGridDelegateWithFixedCrossAxisCount方法说明crossAxisCount设置一行几列childAspectRatio设置每子元素的大小（宽高比）crossAxisSpacing元素的左右的 距离mainAxisSpacing子元素上下的 距离 class GridWidget extends StatelessWidget { @override Widget build(BuildContext context) { return Container( height: 200, child: GridView( gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( // 一行几列 crossAxisCount: 4, // 设置每子元素的大小（宽高比） childAspectRatio: 1.8, // 元素的左右的 距离 crossAxisSpacing: 20, // 子元素上下的 距离 mainAxisSpacing: 10, ), children: [ Container( color: Colors.red, child: Icon(Icons.keyboard), ), Container( color: Colors.pink, child: Icon(Icons.add), ), Container( color: Colors.green, child: Icon(Icons.home), ), Container( color: Colors.blue, child: Icon(Icons.add), ), Container( color: Colors.orange, child: Icon(Icons.home), ), ], ), ); } }

SliverGridDelegateWithMaxCrossAxisExtent方法说明maxCrossAxisExtent每个子元素水平方向上的宽度childAspectRatio设置每子元素的大小（宽高比）crossAxisSpacing元素的左右的 距离mainAxisSpacing子元素上下的 距离 class GridWidget extends StatelessWidget { @override Widget build(BuildContext context) { return Container( height: 200, child: GridView( gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent( // 每个子元素水平方向上的宽度 maxCrossAxisExtent: 120, // 设置每子元素的大小（宽高比） childAspectRatio: 1.8, // 元素的左右的 距离 crossAxisSpacing: 20, // 子元素上下的 距离 mainAxisSpacing: 10, ), children: [ Container( color: Colors.red, child: Icon(Icons.keyboard), ), Container( color: Colors.pink, child: Icon(Icons.add), ), Container( color: Colors.green, child: Icon(Icons.home), ), Container( color: Colors.blue, child: Icon(Icons.add), ), Container( color: Colors.orange, child: Icon(Icons.home), ), ], ), ); } }