Flutter学习笔记--Gridview网格组件制作相册

Flutter学习笔记–Gridview网格组件制作相册
效果：

GridView可以构建一个二维网格列表，其官方定义参考：
https://book.flutterchina.club/chapter6/gridview.html
它的布局方式主要为两种：
SliverGridDelegateWithFixedCrossAxisCount
该子类实现了一个横轴为固定数量子元素的layout算法。
SliverGridDelegateWithMaxCrossAxisExtent
该子类实现了一个横轴子元素为固定最大长度的layout算法。今天我们介绍第一种：其构造函数为（数据为double型）：
SliverGridDelegateWithMaxCrossAxisExtent({
maxCrossAxisExtent, //子元素在横轴最大长度
mainAxisSpacing = 0.0, //主轴元素间距
crossAxisSpacing = 0.0, //横轴间距
childAspectRatio = 1.0, //元素与主轴横轴得大小比例
})
gridview创建在body中，首先设置如上的窗口格式：
body:GridView( //划分网格
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( //横轴固定数量子元素
crossAxisCount: 3, //横轴子元素数量
mainAxisSpacing: 2.0, //主轴间距
crossAxisSpacing: 2.0, //横轴间距
childAspectRatio: 1.0 //子元素放置比例
),

然后创建具体元素（我这里使用的是Image.network的网络图片地址）：
children: [
new Image.network(‘http://img5.mtime.cn/mg/2020/08/14/145018.89856988_285X160X4.jpg’,fit:BoxFit.cover),
new Image.network(‘http://img5.mtime.cn/mg/2020/08/14/083852.73752310_285X160X4.jpg’,fit:BoxFit.cover),
new Image.network(‘http://img5.mtime.cn/mg/2020/08/10/120400.47292216.jpg’,fit:BoxFit.cover),
new Image.network(‘http://img5.mtime.cn/mg/2020/07/23/201005.49303255_270X405X4.jpg’,fit:BoxFit.cover),
new Image.network(‘http://img5.mtime.cn/mg/2020/08/02/162809.52117921_270X405X4.jpg’,fit:BoxFit.cover),
new Image.network(‘http://img5.mtime.cn/mg/2020/07/24/084255.58952810_270X405X4.jpg’,fit:BoxFit.cover),
new Image.network(‘http://img5.mtime.cn/mg/2020/07/24/105612.82558632_270X405X4.jpg’,fit:BoxFit.cover),
new Image.network(‘http://img5.mtime.cn/mg/2020/08/14/091552.47653984_285X160X4.jpg’,fit:BoxFit.cover),
],
大家也可以参考我的图片位置，我是打开的时光网：

找到喜欢的图片右击选择复制图片链接：

然后将地址放入Image.network中；

代码如下：

import 'package:flutter/material.dart';
void main()=> runApp(MyApp());
class MyApp extends StatelessWidget{
 @override
  Widget build(BuildContext context){
    return MaterialApp(
    title: '开心Flutter Demo',
      home: Scaffold(
        appBar: new AppBar(title:new Text('开心Flutter Demo')),
        body:GridView(   //划分网格
         gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(  //横轴固定数量子元素
           crossAxisCount: 3,          //横轴子元素数量
           mainAxisSpacing: 2.0,        //主轴间距
           crossAxisSpacing: 2.0,       //横轴间距
           childAspectRatio: 1.0         //子元素放置比例
         ),
         children: <Widget>[
           new Image.network('http://img5.mtime.cn/mg/2020/08/14/145018.89856988_285X160X4.jpg',fit:BoxFit.cover),
           new Image.network('http://img5.mtime.cn/mg/2020/08/14/083852.73752310_285X160X4.jpg',fit:BoxFit.cover),
           new Image.network('http://img5.mtime.cn/mg/2020/08/10/120400.47292216.jpg',fit:BoxFit.cover),
           new Image.network('http://img5.mtime.cn/mg/2020/07/23/201005.49303255_270X405X4.jpg',fit:BoxFit.cover),
           new Image.network('http://img5.mtime.cn/mg/2020/08/02/162809.52117921_270X405X4.jpg',fit:BoxFit.cover),
           new Image.network('http://img5.mtime.cn/mg/2020/07/24/084255.58952810_270X405X4.jpg',fit:BoxFit.cover),
           new Image.network('http://img5.mtime.cn/mg/2020/07/24/105612.82558632_270X405X4.jpg',fit:BoxFit.cover),
           new Image.network('http://img5.mtime.cn/mg/2020/08/14/091552.47653984_285X160X4.jpg',fit:BoxFit.cover),
         ],
        )
    )
    );
  }
}

效果如上所述。