GridView网格布局,GridTile为带标题、内容和底部的组件,而GridPaper和GridTile很像,只不过会在内容上面加入网格线
class MyApp extends StatelessWidget { const MyApp({Key key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( title: 'GridView、GridTile、GridPaper组件', home: Scaffold( appBar: AppBar( title: Text('GridView、GridTile、GridPaper组件'), ), //支持可嵌套的滚动区域 body: Container( color: Colors.green, height: 400.0, child: GridView.count( //显示2列 crossAxisCount: 2, //垂直间距 mainAxisSpacing: 10.0, //水平间距 crossAxisSpacing: 4.0, //内间距 padding: EdgeInsets.all(4.0), children: [ //GridTile的标题基本用法 GridTile( header: Text( '标题', style: TextStyle(color: Colors.white), ), child: Image.network( 'http://www.5imoban.net/uploads/allimg/200420/1-2004201246100-L.png', fit: BoxFit.cover, ), footer: Text('内容底部', style: TextStyle(color: Colors.white)), ), //GridTile的GridTileBar用法 GridTile( header: GridTileBar( title: Text('header主标题'), //前置图标 leading: Icon(Icons.account_box), subtitle: Text('header子标题'), ), child: Image.network( 'http://www.5imoban.net/uploads/allimg/200420/1-2004201246100-L.png', fit: BoxFit.cover, ), footer: GridTileBar( title: Text('footer主标题'), //前置图标 leading: Icon(Icons.print), subtitle: Text('footer子标题'), ), ), //GridPaper网格的用法 GridPaper( //网格线条的颜色 color: Colors.orange, child: Image.network( 'http://www.5imoban.net/uploads/allimg/200420/1-2004201246100-L.png', fit: BoxFit.cover, ), ) ], ), )), ); } }