配图来自网络，如侵必删
在
Flutter开发当中，我们可能会遇到以下的需求：
展示一个网格列表
这个需求我们就可以用GridView组件来实现。这篇博客主要分享容器组件的GridView组件的使用，希望对看文章的小伙伴有所帮助。
简单示例代码
GridView.count(
padding: const EdgeInsets.all(20),
crossAxisCount: 3,
crossAxisSpacing: 10,
mainAxisSpacing: 10,
children: <Widget>[
Container(
padding: const EdgeInsets.all(8),
child: const Center(
child: Text(
'Java',
style: TextStyle(color: Colors.white),
),
),
color: Colors.red,
),
Container(
padding: const EdgeInsets.all(8),
child: const Center(
child: Text(
'Kotlin',
style: TextStyle(color: Colors.white),
),
),
color: Colors.red,
),
Container(
padding: const EdgeInsets.all(8),
child: const Center(
child: Text(
'Dart',
style: TextStyle(color: Colors.white),
),
),
color: Colors.red,
),
Container(
padding: const EdgeInsets.all(8),
child: const Center(
child: Text(
'Android',
style: TextStyle(color: Colors.white),
),
),
color: Colors.red,
),
Container(
padding: const EdgeInsets.all(8),
child: const Center(
child: Text(
'Flutter',
style: TextStyle(color: Colors.white),
),
),
color: Colors.red,
),
Container(
padding: const EdgeInsets.all(8),
child: const Center(
child: Text(
'iOS',
style: TextStyle(color: Colors.white),
),
),
color: Colors.red,
),
Container(
padding: const EdgeInsets.all(8),
child: const Center(
child: Text(
'Python',
style: TextStyle(color: Colors.white),
),
),
color: Colors.red,
),
Container(
padding: const EdgeInsets.all(8),
child: const Center(
child: Text(
'Go',
style: TextStyle(color: Colors.white),
),
),
color: Colors.red,
),
Container(
padding: const EdgeInsets.all(8),
child: const Center(
child: Text(
'PHP',
style: TextStyle(color: Colors.white),
),
),
color: Colors.red,
),
Container(
padding: const EdgeInsets.all(8),
child: const Center(
child: Text(
'JavaScript',
style: TextStyle(color: Colors.white),
),
),
color: Colors.red,
),
Container(
padding: const EdgeInsets.all(8),
child: const Center(
child: Text(
'C++',
style: TextStyle(color: Colors.white),
),
),
color: Colors.red,
),
Container(
padding: const EdgeInsets.all(8),
child: const Center(
child: Text(
'C#',
style: TextStyle(color: Colors.white),
),
),
color: Colors.red,
),
],
),
效果如下所示：
image.png
组件源码
GridView.count({
Key? key,
Axis scrollDirection = Axis.vertical,
bool reverse = false,
ScrollController? controller,
bool? primary,
ScrollPhysics? physics,
bool shrinkWrap = false,
EdgeInsetsGeometry? padding,
required int crossAxisCount,
double mainAxisSpacing = 0.0,
double crossAxisSpacing = 0.0,
double childAspectRatio = 1.0,
bool addAutomaticKeepAlives = true,
bool addRepaintBoundaries = true,
bool addSemanticIndexes = true,
double? cacheExtent,
List<Widget> children = const <Widget>[],
int? semanticChildCount,
DragStartBehavior dragStartBehavior = DragStartBehavior.start,
ScrollViewKeyboardDismissBehavior keyboardDismissBehavior = ScrollViewKeyboardDismissBehavior.manual,
String? restorationId,
Clip clipBehavior = Clip.hardEdge,
}) : gridDelegate = SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: crossAxisCount,
mainAxisSpacing: mainAxisSpacing,
crossAxisSpacing: crossAxisSpacing,
childAspectRatio: childAspectRatio,
),
childrenDelegate = SliverChildListDelegate(
children,
addAutomaticKeepAlives: addAutomaticKeepAlives,
addRepaintBoundaries: addRepaintBoundaries,
addSemanticIndexes: addSemanticIndexes,
),
super(
key: key,
scrollDirection: scrollDirection,
reverse: reverse,
controller: controller,
primary: primary,
physics: physics,
shrinkWrap: shrinkWrap,
padding: padding,
cacheExtent: cacheExtent,
semanticChildCount: semanticChildCount ?? children.length,
dragStartBehavior: dragStartBehavior,
keyboardDismissBehavior: keyboardDismissBehavior,
restorationId: restorationId,
clipBehavior: clipBehavior,
);
组件属性说明
这里针对源码做出相应的属性说明，熟悉控件的属性方便大家的使用。
| 属性名称 | 属性说明 |
|---|---|
| crossAxisCount | 一行展示多少元素，示例中是展示3个 |
| mainAxisSpacing | 主轴方向的间距 |
| crossAxisSpacing | 横轴方向子元素的间距 |
| childAspectRatio | 子元素在横轴长度和主轴长度的比例 |
| children | 设置子元素组件 |
完整的源码
以下的代码，可以直接复制到编译器去运行，方便小伙伴查看运行结果或者直接使用：
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("GridView组件的使用"),
),
body: GridView.count(
padding: const EdgeInsets.all(20),
crossAxisCount: 3,
crossAxisSpacing: 10,
mainAxisSpacing: 10,
children: <Widget>[
Container(
padding: const EdgeInsets.all(8),
child: const Center(
child: Text(
'Java',
style: TextStyle(color: Colors.white),
),
),
color: Colors.red,
),
Container(
padding: const EdgeInsets.all(8),
child: const Center(
child: Text(
'Kotlin',
style: TextStyle(color: Colors.white),
),
),
color: Colors.red,
),
Container(
padding: const EdgeInsets.all(8),
child: const Center(
child: Text(
'Dart',
style: TextStyle(color: Colors.white),
),
),
color: Colors.red,
),
Container(
padding: const EdgeInsets.all(8),
child: const Center(
child: Text(
'Android',
style: TextStyle(color: Colors.white),
),
),
color: Colors.red,
),
Container(
padding: const EdgeInsets.all(8),
child: const Center(
child: Text(
'Flutter',
style: TextStyle(color: Colors.white),
),
),
color: Colors.red,
),
Container(
padding: const EdgeInsets.all(8),
child: const Center(
child: Text(
'iOS',
style: TextStyle(color: Colors.white),
),
),
color: Colors.red,
),
Container(
padding: const EdgeInsets.all(8),
child: const Center(
child: Text(
'Python',
style: TextStyle(color: Colors.white),
),
),
color: Colors.red,
),
Container(
padding: const EdgeInsets.all(8),
child: const Center(
child: Text(
'Go',
style: TextStyle(color: Colors.white),
),
),
color: Colors.red,
),
Container(
padding: const EdgeInsets.all(8),
child: const Center(
child: Text(
'PHP',
style: TextStyle(color: Colors.white),
),
),
color: Colors.red,
),
Container(
padding: const EdgeInsets.all(8),
child: const Center(
child: Text(
'JavaScript',
style: TextStyle(color: Colors.white),
),
),
color: Colors.red,
),
Container(
padding: const EdgeInsets.all(8),
child: const Center(
child: Text(
'C++',
style: TextStyle(color: Colors.white),
),
),
color: Colors.red,
),
Container(
padding: const EdgeInsets.all(8),
child: const Center(
child: Text(
'C#',
style: TextStyle(color: Colors.white),
),
),
color: Colors.red,
),
],
),
);
}
}
