Flutter GridView网格组件

目录

常用属性

GridView使用配置       

        GridView.count使用

        GridView.extent使用

        GridView.count Container 实现列表

        GridView.extent Container 实现列表

        GridView.builder使用

---

GridView网格布局在实际项目中用的也是非常多的，当我们想让可以滚动的元素使用矩阵方式排列的时候。此时我们可以用网格列表组件GridView实现布局。

GridView创建网格列表主要有下面三种方式

1、可以通过GridView.count实现网格布局
2、可以通过GridView.extent 实现网格布局
3、通过GridView.builder实现动态网格布局

常用属性

GridView使用配置       

        GridView.count使用

import 'package:flutter/material.dart';void main() {runApp(MyTestApp());
}class MyTestApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(theme: ThemeData(primarySwatch: Colors.yellow),home: Scaffold(appBar: AppBar(title: Text("App")),body: MyTestHomePage(),),);}
}//Material Design官方Icons图标
class MyTestHomePage extends StatelessWidget {@overrideWidget build(BuildContext context) {return GridView.count(crossAxisCount: 4, //一行显示的children: [Image.asset("assets/images/iv_account_selected.png"),Icon(Icons.abc_rounded),Icon(Icons.abc_sharp),Icon(Icons.factory),]);}
}

        GridView.extent使用

import 'package:flutter/material.dart';void main() {runApp(MyTestApp());
}class MyTestApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(theme: ThemeData(primarySwatch: Colors.yellow),home: Scaffold(appBar: AppBar(title: Text("App")),body: MyTestHomePage(),),);}
}//Material Design官方Icons图标
class MyTestHomePage extends StatelessWidget {@overrideWidget build(BuildContext context) {return GridView.extent(maxCrossAxisExtent: 180, //横轴子元素的最大长度children: [Icon(Icons.abc_rounded),Icon(Icons.abc_sharp),Icon(Icons.factory),],);}
}

        GridView.count Container 实现列表

import 'package:flutter/material.dart';void main() {runApp(MyTestApp());
}class MyTestApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(theme: ThemeData(primarySwatch: Colors.yellow),home: Scaffold(appBar: AppBar(title: Text("App")),body: MyTestHomePage(),),);}
}//Material Design官方Icons图标
class MyTestHomePage extends StatelessWidget {List<Widget> initList() {List<Widget> list = [];for (var i = 0; i < 10; i++) {list.add(Container(alignment: Alignment.center,decoration: BoxDecoration(color: Colors.blue),child: Text("第$i个元素", style: TextStyle(fontSize: 20)),),);}return list;}@overrideWidget build(BuildContext context) {return GridView.count(padding: EdgeInsets.all(10),crossAxisSpacing: 10, //水平间距mainAxisSpacing: 10, //垂直间距crossAxisCount: 2, //一行显示多少个元素childAspectRatio: 0.7,//宽高的比例children: initList(),);}
}

        GridView.extent Container 实现列表

import 'package:flutter/material.dart';void main() {runApp(MyTestApp());
}class MyTestApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(theme: ThemeData(primarySwatch: Colors.yellow),home: Scaffold(appBar: AppBar(title: Text("App")),body: MyTestHomePage(),),);}
}//Material Design官方Icons图标
class MyTestHomePage extends StatelessWidget {List<Widget> initList() {List<Widget> list = [];for (var i = 0; i < 10; i++) {list.add(Container(alignment: Alignment.center,decoration: BoxDecoration(color: Colors.blue),child: Text("第$i个元素", style: TextStyle(fontSize: 20)),),);}return list;}@overrideWidget build(BuildContext context) {return GridView.extent(padding: EdgeInsets.all(10),crossAxisSpacing: 10, //水平间距mainAxisSpacing: 10, //垂直间距maxCrossAxisExtent: 120,//横轴子元素的最大长度 动态计算//childAspectRatio: 0.7,//宽高的比例children: initList(),);}
}

map循环遍历数据，通过Container渲染

import 'package:flutter/material.dart';void main() {runApp(MyTestApp());
}class MyTestApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(theme: ThemeData(primarySwatch: Colors.yellow),home: Scaffold(appBar: AppBar(title: Text("App")),body: MyTestHomePage(),),);}
}//Material Design官方Icons图标
class MyTestHomePage extends StatelessWidget {List<Widget> initList() {List<Widget> list = [];for (var i = 0; i < 10; i++) {list.add(Container(alignment: Alignment.center,decoration: BoxDecoration(color: Colors.blue),child: Column(children: [Image.network("https://p4.img.cctvpic.com/photoAlbum/photo/2025/05/27/PHOT1cFfxozsH6VncGwLpViz250527_1000x2000.jpg"),Text("第$i元素"),]),),);}return list;}@overrideWidget build(BuildContext context) {return GridView.extent(padding: EdgeInsets.all(10),crossAxisSpacing: 10,//水平间距mainAxisSpacing: 10,//垂直间距maxCrossAxisExtent: 120,//横轴子元素的最大长度childAspectRatio: 1,//宽高的比例children: initList(),);}
}

        GridView.builder使用

import 'package:flutter/material.dart';void main() {runApp(MyTestApp());
}class MyTestApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(theme: ThemeData(primarySwatch: Colors.yellow),home: Scaffold(appBar: AppBar(title: Text("App")),body: MyTestHomePage(),),);}
}//Material Design官方Icons图标
class MyTestHomePage extends StatelessWidget {List list = [{"title": "Candy Shop","imageUrl":"https://p4.img.cctvpic.com/photoAlbum/photo/2025/05/27/PHOT1cFfxozsH6VncGwLpViz250527_1000x2000.jpg","author": "Mohamed Chahin",},{"title": "Zhao Shop","imageUrl":"https://p4.img.cctvpic.com/photoAlbum/photo/2025/05/27/PHOT1cFfxozsH6VncGwLpViz250527_1000x2000.jpg","author": "Mohamed Chahin",},{"title": "Fei Shop","imageUrl":"https://p4.img.cctvpic.com/photoAlbum/photo/2025/05/27/PHOT1cFfxozsH6VncGwLpViz250527_1000x2000.jpg","author": "Mohamed Chahin",},];Widget initList(context,index) {return Container(alignment: Alignment.center,decoration: BoxDecoration(color: Colors.blue),child: Column(children: [Image.network(list[index]["imageUrl"]),Text(list[index]["title"]),],),);}@overrideWidget build(BuildContext context) {return GridView.builder(padding: EdgeInsets.all(10),itemCount: list.length,gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2,crossAxisSpacing: 10,childAspectRatio: 1,),itemBuilder: initList);}// return GridView.builder(//   padding: EdgeInsets.all(10),//   itemCount: list.length,//   gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(//     maxCrossAxisExtent: 200,//     crossAxisSpacing: 10,//     childAspectRatio: 1,//   ),//   itemBuilder: initList,// );
}