Flutter使用GridView组件

一开始我们就制作一个入口class和脚手架

import 'package:flutter/material.dart';

void main()=>runApp(MainApp());

class MainApp extends StatelessWidget {
	
  	@override
  	Widget build(BuildContext context) {

		return MaterialApp(
			home: Scaffold(
				appBar: AppBar(title: Text('Grid View')),
				drawer: Drawer(
					child: SafeArea(child: Text('Test'),),
				),
				body: SafeArea(
					child: MyGridView()
				),
			)
		);
  	}
}

接着我们再来自己做一个MyGridView的组件

class MyGridView extends StatelessWidget 
{
	final List<String> arrayx = [];

	void addImage()
	{
		for (var i = 0; i < 10; i++)
		{
			arrayx..add('https://p.ssl.qhimg.com/t018ecafd8973fbba85.jpg');
		}
		print('ffff');
	}

	@override
	Widget build(BuildContext context) {
		addImage();
		return 
		GridView.builder(
			gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
				crossAxisCount: 2,
				childAspectRatio: 0.7,
				mainAxisSpacing: 2.0,
				crossAxisSpacing: 2.0,
			),
			cacheExtent: 10.0,
			itemBuilder: (context,index){
				return Container(
					color: Colors.black,
					child: Image.network(arrayx[index]),
				);
			},
			itemCount: arrayx.length,
		);
	}
}

crossAxisCount ：每行的显示数量
childAspectRatio ： 每个格的宽高比例
mainAxisSpacing ： 横向的距离
crossAxisSpacing ： 直向距离
cacheExtent ：预加载数量

结果会是以下这样