Flutter笔记25：GridView、GridTile、GridPaper组件

GridView、GridTile、GridPaper组件案例，GridTile、GridPaper不一定要放在GridView里面，这里只是为了好看。
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,
                  ),
                )
              ],
            ),
          )),
    );
  }
}

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！