> 文章列表 > 第七回:如何使用GirdView Widget

第七回:如何使用GirdView Widget

第七回:如何使用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的内容就介绍到这里,欢迎大家在评论区交流与讨论!