第七回：如何使用GirdView Widget

我们在上一章回中介绍了Image Widget,本章回中将介绍 GirdView这种Widget，闲话休提，让我们一起Talk Flutter吧。

概念介绍

在Flutter中使用GirdView表示网格状的布局，类似日常办公中使用的Excel,它和ListView一样具有滚动功能，当被显示的内容大于屏幕高度时就让内容在屏幕中滚动显示。

使用方法

1. 创建GirdVeiw对象，并且设置相关属性；这里的属性包含列的数量，行的间距等内容；
2. 添加布局中显示的内容，这些内容会依据列的数量自动排列；

以上是大体的思路和步骤，还有一些细节上的知识需要介绍：

• 创建对象使用GirdView类的count()或者excount()方法;
• 设置列的数量使用crossAxisCount命名参数；
• 设置行的间隔使用crossAxisSpacing命名参数控制；
• 添加布局中的内容时使用children命名参数。

示例代码

  Widget girdViewEx = GridView.count(
    crossAxisCount: 4,
    crossAxisSpacing: 0.5,
    children: [
      Icon(Icons.light),
      Icon(Icons.arrow_back),
      Icon(Icons.light),
      Icon(Icons.hail),
      Icon(Icons.nat),
      Icon(Icons.hail),
      Icon(Icons.mail),
      Icon(Icons.hail),
    ],
  );

在上面的代码中我们创建了一个4列的网格，在每个网格里显示不同的Icon。这些Icon使用SDK自带的图标。我们上面的widget添加到MaterialApp中就可以运行了，代码如下：

//build方法省略不写
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(primaryColor: Colors.blue),
        home: Scaffold(
            appBar: AppBar(
              title: const Text("Title of Hello App"),
            ),
            // body: Column(
            //   children: [
            //     wechatBottom,
            //     imageEx,
            //   ],
            // )
          // body: listEx,
          body: girdViewEx,
        )
    );

注意：它和ListView一样，需要放到body中单独使用，而不是放到Column中使用，也就是说它们不能和Row或者Column嵌套使用。编译上面的程序可以得到以下运行效果：

经验总结

• GirdView是一种容器类Widget和ListView的使用方法类似，而且它自带滚动功能，当容器中行的数量大于屏幕可以显示的数量时，我们可以滑动显示其它行中的内容。
• GirdView可以自动调整每行中的内容，我们只需要指定列的数量就可以。

看官们，关于GirdView Widget的内容就介绍到这里，欢迎大家在评论区交流与讨论!