木辛老师来了，本节课咱们一起来看看如何在Flutter中使用StaggeredGridView吧！
请点击右上角“关注”按钮关注我们哟：跟着木辛老师学习Flutter基础编程知识，变身快乐的编程达人吧~
在Flutter中有一个支持自定义的GridView组件，它的名字叫做StaggeredGridView。
这是一个可以呈现交错网格样式的小部件，非常适合用在一些电影或者产品介绍类的应用程序中。往往在这类的程序中展现的图片或者描述都是不定长度的，有的会很长，有的却很短。
因此，通过今天的内容，让我们一起学习一下这个组件的知识吧。
口说没概念，上图表诚意，请看：
看到这图是不是被StaggeredGridView的效果震撼住了捏？
那么，我们来详细讲讲吧。
通过引入flutter_staggered_grid_view可以使用StaggeredGridView
- 创建Flutter项目
使用你最喜欢的编辑器创建一个Flutter项目
- 添加依赖
因为这是第三方的依赖项，所以需要先安装它。我们通过在pubspec.yaml文件中添加如下代码：
dependencies: flutter_staggered_grid_view: 0.4.0
添加之后，执行命令
flutter pub get
将需要的代码同步到本地项目中。
- 开始使用
导入这个库
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
- 创建StaggeredGridView
StaggeredGridView 使用的是和 GridView 相同的构造函数的调用方式。这里有两个构造函数countBuilder 和 extentBuilder。这些构造函数允许您为布局定义一个构建器，同时也支持为子项定义一个构建器。
所以要创建一个 StaggeredGridView非常简单，第一步：实例化它；第二步：调用countBuilder并传递 crossAxisCount、itemCount 和 itemBuilder ，如下所示：
new StaggeredGridView.countBuilder(
crossAxisCount: 4,
itemCount: 8,
itemBuilder: (BuildContext context, int index) => new Container(
color: Colors.green,
child: new Center(
child: new CircleAvatar(
backgroundColor: Colors.white,
child: new Text('$index'),
),
),
),
staggeredTileBuilder: (int index) =>
new StaggeredTile.count(2, index.isEven ? 2 : 1),
mainAxisSpacing: 4.0,
crossAxisSpacing: 4.0,
)
写完之后执行一下，你那边的效果是不是如下图所示的样子呢？
调用就是这么滴简单，要不我们再来个完整的程序看看吧？
（一）
多彩的带有小图标的GridView效果
import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
const List<StaggeredTile> _staggeredTiles = <StaggeredTile>[
StaggeredTile.count(2, 2),
StaggeredTile.count(2, 1),
StaggeredTile.count(1, 2),
StaggeredTile.count(1, 1),
StaggeredTile.count(2, 2),
StaggeredTile.count(1, 2),
StaggeredTile.count(1, 1),
StaggeredTile.count(3, 1),
StaggeredTile.count(1, 1),
StaggeredTile.count(4, 1),
];
const List<Widget> _tiles = <Widget>[
_Example01Tile(Colors.green, Icons.widgets),
_Example01Tile(Colors.lightBlue, Icons.wifi),
_Example01Tile(Colors.amber, Icons.panorama_wide_angle),
_Example01Tile(Colors.brown, Icons.map),
_Example01Tile(Colors.deepOrange, Icons.send),
_Example01Tile(Colors.indigo, Icons.airline_seat_flat),
_Example01Tile(Colors.red, Icons.bluetooth),
_Example01Tile(Colors.pink, Icons.battery_alert),
_Example01Tile(Colors.purple, Icons.desktop_windows),
_Example01Tile(Colors.blue, Icons.radio),
];
class Example01 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('example 01'),
),
body: Padding(
padding: const EdgeInsets.only(top: 12),
child: StaggeredGridView.count(
crossAxisCount: 4,
staggeredTiles: _staggeredTiles,
mainAxisSpacing: 4,
crossAxisSpacing: 4,
padding: const EdgeInsets.all(4),
children: _tiles,
),
),
);
}
}
class _Example01Tile extends StatelessWidget {
const _Example01Tile(this.backgroundColor, this.iconData);
final Color backgroundColor;
final IconData iconData;
@override
Widget build(BuildContext context) {
return Card(
color: backgroundColor,
child: InkWell(
onTap: () {},
child: Center(
child: Padding(
padding: const EdgeInsets.all(4),
child: Icon(
iconData,
color: Colors.white,
),
),
),
),
);
}
}
程序写完，是不是就迫不及待地想执行看看效果啦？
看着还不错！
再来看一个例子
（二）带有数字的GridView
import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
class Example02 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('example 02'),
),
body: Padding(
padding: const EdgeInsets.all(4),
child: StaggeredGridView.countBuilder(
crossAxisCount: 4,
itemCount: 8,
itemBuilder: (BuildContext context, int index) => Container(
color: Colors.green,
child: Center(
child: CircleAvatar(
backgroundColor: Colors.white,
child: Text('$index'),
),
),
),
staggeredTileBuilder: (int index) =>
StaggeredTile.count(2, index.isEven ? 2 : 1),
mainAxisSpacing: 4,
crossAxisSpacing: 4,
),
),
);
}
}
执行，执行！
好了，程序就写到这，如果意犹未尽，那就等接下来的文章吧。
请大家关注木辛老师的课程哟，获取更多编程知识和编程技巧。接下来，木辛老师和大家一步一步地学习Flutter知识吧。
快乐编程，快乐成长！
咱们下节课再见，88~
最新评论