前面我们介绍了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相同。
运行结果如下: