第七回:如何使用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_第1张图片

经验总结

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

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

你可能感兴趣的:(一起Talk,Flutter吧,flutter,android,ios,girdView,网格布局)