Flutter基础学习 9-19 GridView网格列表组件

前面我们介绍了ListView，下面介绍GridView的使用，网格列表经常用来显示多张图片，比如我们经常使用的手机里的相册功能，大部分形式都是网格列表。

话不多数，demo源码如下：

import 'package:flutter/material.dart';
//主函数（入口函数）
void main() {
     runApp(MyApp());
}
//声明MyApp类继承-StatelessWidget：具有不可变状态(state)的Widget(窗口小部件).
class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    //返回一个material风格的组件
    return MaterialApp(
       title: 'Welcome to Flutter',   
       //Scaffold:实现了基本的 Material 布局,可以理解为一个布局的容器
       home: Scaffold(                //home ： 应用默认所显示的界面 Widget
          appBar: AppBar(
            title: Text('Welcome to Flutter'),
          ),
          body:GridView(   //定义一个网格布局
            //gridDelegate:控制GridView子小部件如何排列（布局）
            //SliverGridDelegateWithFixedCrossAxisCount:它创建一个在横轴上具有固定数量的 网格块 的布局。
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 3,//列数
              mainAxisSpacing: 5.0,//列向上单元格之间距离
              crossAxisSpacing: 5.0,//横向上单元格之间的距离
              childAspectRatio: 0.7,//单元格宽高比
            ),
            children: <Widget>[  //单元格填充网络图片
             new Image.network('http://img5.mtime.cn/mt/2018/10/22/104316.77318635_180X260X4.jpg',fit: BoxFit.cover),
             new Image.network('http://img5.mtime.cn/mt/2018/10/10/112514.30587089_180X260X4.jpg',fit: BoxFit.cover),
             new Image.network('http://img5.mtime.cn/mt/2018/11/13/093605.61422332_180X260X4.jpg',fit: BoxFit.cover),
             new Image.network('http://img5.mtime.cn/mt/2018/11/07/092515.55805319_180X260X4.jpg',fit: BoxFit.cover),
             new Image.network('http://img5.mtime.cn/mt/2018/11/21/090246.16772408_135X190X4.jpg',fit: BoxFit.cover),
             new Image.network('http://img5.mtime.cn/mt/2018/11/17/162028.94879602_135X190X4.jpg',fit: BoxFit.cover),
             new Image.network('http://img5.mtime.cn/mt/2018/11/19/165350.52237320_135X190X4.jpg',fit: BoxFit.cover),
             new Image.network('http://img5.mtime.cn/mt/2018/11/16/115256.24365160_180X260X4.jpg',fit: BoxFit.cover),
             new Image.network('http://img5.mtime.cn/mt/2018/11/20/141608.71613590_135X190X4.jpg',fit: BoxFit.cover),
             new Image.network('http://img5.mtime.cn/mt/2019/05/20/092152.85702867_100X140X4.jpg',fit: BoxFit.cover),
             new Image.network('http://img5.mtime.cn/mt/2019/05/21/103425.73457018_100X140X4.jpg',fit: BoxFit.cover),
             new Image.network('http://img5.mtime.cn/mt/2019/05/23/095633.44711442_100X140X4.jpg',fit: BoxFit.cover),
             new Image.network('http://img5.mtime.cn/mt/2019/05/09/212512.62781081_100X140X4.jpg',fit: BoxFit.cover),
             new Image.network('http://img5.mtime.cn/mt/2019/06/13/092359.84068611_100X140X4.jpg',fit: BoxFit.cover),
             new Image.network('http://img5.mtime.cn/mt/2019/05/31/155724.43940251_100X140X4.jpg',fit: BoxFit.cover),
             new Image.network('http://img5.mtime.cn/mt/2019/06/04/093057.79088785_100X140X4.jpg',fit: BoxFit.cover),
             new Image.network('http://img5.mtime.cn/mt/2019/06/14/160741.57050789_100X140X4.jpg',fit: BoxFit.cover),
             new Image.network('http://img5.mtime.cn/mt/2019/05/06/105806.73235069_100X140X4.jpg',fit: BoxFit.cover),
             new Image.network('http://img5.mtime.cn/mt/2019/06/14/160741.57050789_100X140X4.jpg',fit: BoxFit.cover),
             new Image.network('http://img5.mtime.cn/mt/2019/06/13/092338.42575710_100X140X4.jpg',fit: BoxFit.cover),
             new Image.network('http://img5.mtime.cn/mt/2019/05/20/105528.53853847_100X140X4.jpg',fit: BoxFit.cover),
             new Image.network('http://img5.mtime.cn/mt/2019/06/14/001220.81378981_100X140X4.jpg',fit: BoxFit.cover),
             new Image.network('http://img31.mtime.cn/mt/2014/02/23/051529.30883104_100X140X4.jpg',fit: BoxFit.cover),
            ],
          )
        ),
       theme: new ThemeData(primaryColor: Colors.red),  // 设置主题颜色
    );
  }
}

需要注意的知识点：

GridView中和的ListView的大多数参数都是相同的，它们的含义也都相同，唯一我们关注需要的的英文gridDelegate参数，类型是SliverGridDelegate，它的作用是控制GridView子小部件如何排列（布局），SliverGridDelegate是一个抽象类，定义了GridView Layout相关接口，子类需要通过实现它们来实现具体的布局算法，Flutter中提供了两个SliverGridDelegate的子类SliverGridDelegateWithFixedCrossAxisCount和SliverGridDelegateWithMaxCrossAxisExtent，下面我们分别介绍：

1、子类SliverGridDelegateWithFixedCrossAxisCount

该子类实现了一个横轴为固定数量子元素的布局算法，属性如下：

crossAxisCount：横轴子元素的数量此属性值确定后子元素在横轴的长度就确定了，即视区横轴长度/ crossAxisCount。
mainAxisSpacing：主轴方向的间距。
crossAxisSpacing：横轴方向子元素的间距。
childAspectRatio：子元素在横轴长度和主轴长度的比例由于crossAxisCount指定后子元素横轴长度就确定了，然后通过此参数值就可以确定子元素在主轴的长度。

可以发现，子元素的大小是通过crossAxisCount和childAspectRatio两个参数共同决定的。注意，这里的子元素指的是子插件的最大显示空间，注意确保子插件的实际大小不要超出子元素的空间。

2、子类SliverGridDelegateWithMaxCrossAxisExtent

该子类实现了一个横轴子元素为固定最大长度的布局算法，属性如下：

maxCrossAxisExtent为子元素在横轴上的最大长度，之所以是“最大”长度，的英文因为横轴方向每个子元素的长度仍然的英文等分的，举个例子，如果视区的横轴长度是450，那么当maxCrossAxisExtent的值在区间[450/4450/3）内的话，子元素最终实际长度都为112.5，而childAspectRatio所指的子元素横轴状语从句：主轴的长度比为名单最终的长度比。其它参数和SliverGridDelegateWithFixedCrossAxisCount相同。

运行结果如下：

Flutter基础学习 9-19 GridView网格列表组件

猜你喜欢