Flutter GridView网格组件

发表于 2025-6-21 09:34:41

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有账号？立即注册

×

目录
常用属性
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 {
@override
Widget 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 {
@override
Widget 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 {
@override
Widget 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 {
@override
Widget 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 {
@override
Widget 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;
}
@override
Widget 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 {
@override
Widget 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;
}
@override
Widget 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 {
@override
Widget 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;
}
@override
Widget 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 {
@override
Widget 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"]),
],
),
);
}
@override
Widget 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,
// );
}

复制代码

Flutter GridView网格组件

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

浏览过的版块

不到断气不罢休