Flutter中关于StaggeredGridView的点滴「建议收藏」

欢迎大家来到IT世界,在知识的湖畔探索吧!

木辛老师来了，本节课咱们一起来看看如何在Flutter中使用StaggeredGridView吧！

请点击右上角“关注”按钮关注我们哟：跟着木辛老师学习Flutter基础编程知识，变身快乐的编程达人吧~

在Flutter中有一个支持自定义的GridView组件，它的名字叫做StaggeredGridView。

这是一个可以呈现交错网格样式的小部件，非常适合用在一些电影或者产品介绍类的应用程序中。往往在这类的程序中展现的图片或者描述都是不定长度的，有的会很长，有的却很短。

因此，通过今天的内容，让我们一起学习一下这个组件的知识吧。

口说没概念，上图表诚意，请看：

看到这图是不是被StaggeredGridView的效果震撼住了捏？

那么，我们来详细讲讲吧。

通过引入flutter_staggered_grid_view可以使用StaggeredGridView

• 创建Flutter项目

使用你最喜欢的编辑器创建一个Flutter项目

• 添加依赖

因为这是第三方的依赖项，所以需要先安装它。我们通过在pubspec.yaml文件中添加如下代码：

dependencies: flutter_staggered_grid_view: 0.4.0

欢迎大家来到IT世界,在知识的湖畔探索吧!

添加之后，执行命令

欢迎大家来到IT世界,在知识的湖畔探索吧!flutter pub get

将需要的代码同步到本地项目中。

• 开始使用

导入这个库

import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

• 创建StaggeredGridView

StaggeredGridView 使用的是和 GridView 相同的构造函数的调用方式。这里有两个构造函数countBuilder 和 extentBuilder。这些构造函数允许您为布局定义一个构建器，同时也支持为子项定义一个构建器。

所以要创建一个 StaggeredGridView非常简单，第一步：实例化它；第二步：调用countBuilder并传递 crossAxisCount、itemCount 和 itemBuilder ，如下所示：

欢迎大家来到IT世界,在知识的湖畔探索吧!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~