创建一个网格视图，最简单的方法就是使用 GridView 的 count .. 用一下 GridView.count .. 这个 count 指的是在交叉轴上显示的项目数量 .. GridView 默认可以垂直滚动 .. 这样这个网格视图的 MainAxis ，主轴 .. 就应该是竖着的这个轴 .. 对应的 CrossAxis .. 交叉轴，应该是横轴 .. 就是水平方向的这个轴 ..

GridView.count 里面需要提供一个 crossAxisCount .. 表示在交叉轴上显示的项目的数量 .. 先把它设置成 3 .. 然后再添加一个 children .. 它里面的东西就是网格视图里的项目 .. 或者叫 Tiles .. Tile 有瓷砖的意思 .. 你可以把它想成是一块一块儿的东西 .

一个 Container .. 里面用 color 设置一下背景颜色 .. 颜色是 grey[300] ... 再用 alignment 设置一下对齐 .. 把 Alignment 的 x 还有 y 的值都设置成 0.0

这个 Container 的 child 是一个 Text .. 要显示的文字是 Item .. 再用 style 设置一下文字的样式 ... TextStyle .. fontSize 字号是 18.0 ... color 文字的颜色是 grey ..

这里的这个 Container 还有它里面包装的东西 .. 就相当于是网络视图里的一个项目 .. 或者叫一个 Tile .. 再复制几份 ...

现在界面上显示的就是一个网格视图 .. 默认可以垂直滚动这个网格视图 ..

在这些项目之间可以再添加点边距 .. 先用一个 crossAxisSpacing .. 大小是 16.0 .. 然后再添加一个 mainAxisSpacing ... 大小也可以是 16.0 ..

这里我们可以再添加一个方法去生成这些网格视图里的项目 .. 去掉多余的 Container .. 只留下其中的一个 ..

剪切一下 ... 再把 children 属性的值... 换成一个方法 .. 名字是 _buildTiles .. 方法接收一个要生成的项目的数量 .. 比如 100 ..

在上面再去定义一下这个方法 .. 方法会返回一个组 Widget 类型的 List .. 方法的名字叫 _buildTiles .. 接收一个整数类型的参数，名字可以是 length，表示要生成的项目的数量 ..

return 的东西用一下 List.generate 这个方法 .. 它同样接收一个 length 参数 ... 还有一个回调 .. 这个回调里面有个整数类型的 index 参数 .. 表示项目的索引号 ..

return 的东西就是刚才我们创建的那个 Container 小部件 .. 再简单修改一下它里面要显示的文字 .. Item 后面加上项目的索引号 .. $index ..

保存 ..

现在这个网格视图里面会包含 100 个项目 .. 每一行现在会显示 3 个项目 .. 这个数量是 crossAxisSpacing 属性控制的 ... 可以修改一下它的值 .. 看一下有什么变化 ..

默认我们可以垂直滚动这个网格视图 .. 这个滚动的方向也可以是水平的 .. 添加一个 scrollDirection .. 把它的值设置成 Axis.horizontal ..

现在这个网格视图可以水平滚动 ... 注意现在水平方向会显示两个项目 .. 垂直方向会显示 crossAxisCount 这个属性设置的那个项目的数量 .. 这个是因为我们改变了视图的主轴的方向 .. 之前垂直滚动的时候，主轴也是垂直的 .. 现在滚动的方向变成了水平方向 .. 也就是主轴就变成了水平方向的轴 .. 跟主轴垂直的那个交叉轴，现在会是竖着的这个轴 ..