7. Flutter——GridView组件

GridView 组件的常用参数

• 当数据量很大的时候用矩阵方式排列比较清晰。此时我们可以用网格列表组件 GridView 实 现布局。

• 常用属性:

名称	类型	说明
scrollDirection	Axis	滚动
padding	EdgeInsetsGeometry	内边距
resolve	bool	组件反向序列化
crossAxisSpacing	double	水平子 Widget 之间间距
mainAxisSpacing	double	垂直子 Widget 之间间距
crossAxisCount	int	一行的 Widget 数量
childAspectRatio	double	子 Widget 宽高比例
children	int	< Widget >[ ]
gridDelegate	SliverGridDelegateWithFix edCrossAxisCount（常用） SliverGridDelegateWithMax CrossAxisExtent	控制布局主要用在 GridView.builder 里面

---

GridView.count 实现网格布局

import'package:flutter/material.dart';
import'res/listData.dart';

voidmain()=>runApp(MyApp());

classMyAppextendsStatelessWidget{ 
	@override
	 Widgetbuild(BuildContextcontext){  
	 	returnMaterialApp( 
	 		home:Scaffold( 
	 			appBar:AppBar(title:Text('FlutterDemo')), 
	 			body:LayoutContent(), 
	 		));
	 } 
	}

classLayoutContentextendsStatelessWidget{
	List<Widget>_getListData(){ 
		vartempList=listData.map((value){ 
			returnContainer( 
				child: Column( 
					children:<Widget>[ 
						Image.network(value["imageUrl"]), 
						SizedBox(height:12),	
						Text(value["title"],										
						textAlign:TextAlign.center,
						style:TextStyle(fontSize:20)), 
						], 
					), 
				    decoration:BoxDecoration( 
				    	border:Border.all( 
				    		color:Color.fromRGBO(230,230,230,0.9), 
				    		width:1.0 
				    		) 
				    	),
					);
	}); 
	returntempList.toList();
}

@override 
Widgetbuild(BuildContextcontext){  
	returnGridView.count( 
		padding:EdgeInsets.all(20), 
		crossAxisCount:2, 
		crossAxisSpacing:20, 
		mainAxisSpacing:20,  
		children:this._getListData(), 
		); 
	}
}

---

GridView.builder 实现网格布局

import'package:flutter/material.dart';
import'res/listData.dart';

voidmain()=>runApp(MyApp());

classMyAppextendsStatelessWidget{ 
	@override Widgetbuild(BuildContextcontext){ 
		returnMaterialApp( 
			home:Scaffold( 
			appBar:AppBar(title:Text('FlutterDemo')), 
			body:LayoutContent(), 
			)); 
		} 
	}

classLayoutContentextendsStatelessWidget{
	Widget_getListData(context,index){ 
		returnContainer( 
			child: Column( 
				children:<Widget>[ 
					Image.network(listData[index]["imageUrl"]), 
					SizedBox(height:12), 
					Text(listData[index]["title"],
					textAlign: TextAlign.center,style:TextStyle(fontSize: 20)), 
					], 
				), 
			decoration:BoxDecoration( 
				border:Border.all( 
					color:Color.fromRGBO(230,230,230,0.9), 
					width:1.0 
				) 
			),
	);
}

@override 
Widgetbuild(BuildContextcontext){ 
	 returnGridView.builder( 
	 	itemCount:listData.length, 
	 	gridDelegate:SliverGridDelegateWithFixedCrossAxisCount(
	 			 //横轴元素个数 
	 			 crossAxisCount:2, 
	 			 //纵轴间距 
	 			 mainAxisSpacing:20.0, 
	 			 //横轴间距 
	 			 crossAxisSpacing:10.0, 
	 			 //子组件宽高长度比例 
	 			 childAspectRatio:1.0 
	 		), 
		itemBuilder:this._getListData, 
	  ); 
	}
}