GridView接收如下可选参数属性：

  • scrollDirection：滚动方法
  • padding：内边距
  • resolve：组件反向排序
  • crossAxisSpacing：水平子Widget之间间距
  • mainAxisSpacing：垂直子Widget之间间距
  • crossAxisCount：一行的Widget数量
  • childAspectRatio：子Widget宽高比例
  • children：
  • gridDelegate：控制布局主要用在GridView.builder里面

实现代码，我不说多
1、网格数据，我选择的是七个数据：图标和对应它的小标题

import 'package:flutter/material.dart';List listData = [{"title": "信息列表1","author": 'Mohamed Chahin',// "imageUrl": 'https://www.itying.com/images/flutter/1.png',// "imageUrl": 'images/json.png',"imageUrl": Icons.account_tree_rounded,},{"title": '信息列表2',"author": 'Mohamed Chahin',// "imageUrl": 'https://www.itying.com/images/flutter/1.png',// "imageUrl": 'images/statistics.png',"imageUrl": Icons.ad_units_rounded,},{"title": '信息列表3',"author": 'Mohamed Chahin',// "imageUrl": 'https://www.itying.com/images/flutter/1.png',// "imageUrl": 'images/statistics.png',"imageUrl": Icons.adb,},{"title": '信息列表4',"author": 'Mohamed Chahin',// "imageUrl": 'https://www.itying.com/images/flutter/1.png',// "imageUrl": 'images/statistics.png',"imageUrl": Icons.add_alert_sharp,},{"title": '信息列表5',"author": 'Mohamed Chahin',// "imageUrl": 'https://www.itying.com/images/flutter/1.png',// "imageUrl": 'images/statistics.png',"imageUrl": Icons.add_a_photo_rounded,},{"title": '信息列表6',"author": 'Mohamed Chahin',// "imageUrl": 'https://www.itying.com/images/flutter/1.png',// "imageUrl": 'images/json.png',"imageUrl": Icons.add_a_photo_outlined,},{"title": '信息列表7',"author": 'Mohamed Chahin',// "imageUrl": 'images/statistics.png',"imageUrl": Icons.add_photo_alternate_sharp,}];

2、视图main.dart代码：

import 'package:flutter/material.dart';import 'package:flutter_test_app/res/listData.dart';void main() {runApp(const MyApp());}class MyApp extends StatelessWidget {const MyApp({super.key});@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo',theme: ThemeData(colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),useMaterial3: true,),home: const MyHomePage(title: 'Flutter Demo Home Page'),);}}class MyHomePage extends StatefulWidget {const MyHomePage({super.key, required this.title});final String title;@overrideState<MyHomePage> createState() => _MyHomePageState();}class _MyHomePageState extends State<MyHomePage> {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(backgroundColor: Theme.of(context).colorScheme.inversePrimary,title: Text(widget.title),),body: Column(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[//新增代码Expanded(child: GridViewTest(),),],),);}}class GridViewTest extends StatefulWidget {@overrideLayoutDemo createState() => LayoutDemo();}class LayoutDemo extends State<GridViewTest> {List<Widget> _getListData() {var tempList = listData.map((value) {return Center(child: InkWell( //InkWell：GridView的item背景点击变色，松开恢复原色onTap: () {},child: Container(alignment: Alignment.bottomCenter,//设置一个外边框decoration: BoxDecoration(border: Border.all(color: Colors.black12,width: 1.0, //默认)),child: Column(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[const SizedBox(width: 10, height: 10),Icon(value['imageUrl'],color: Colors.green,size: 60,),Text(value['title'])],),),),);});return tempList.toList();}@overrideWidget build(BuildContext context) {return GridView.count(crossAxisCount: 3,children: _getListData(),// mainAxisSpacing:9.0,// crossAxisSpacing:9.0,// padding: const EdgeInsets.all(10),);}}

运行效果：