Flutter study notes-Gridview grid component to make a photo album

Flutter study notes-Gridview grid component to make a photo album
Effect:

GridView can build a two-dimensional grid list, its official definition reference:
https://book.flutterchina.club/chapter6/gridview.html
It has two main layout methods:
SliverGridDelegateWithFixedCrossAxisCount
This subclass implements a fixed horizontal axis The layout algorithm of the number of sub-elements.
SliverGridDelegateWithMaxCrossAxisExtent
This subclass implements a layout algorithm with a fixed maximum length for the horizontal axis sub-elements. Today we introduce the first one: Its constructor is (data is double type):
SliverGridDelegateWithMaxCrossAxisExtent({ maxCrossAxisExtent, //Maximum length of sub-elements on the horizontal axis mainAxisSpacing = 0.0, // Main axis element spacing crossAxisSpacing = 0.0, //Horizontal axis spacing childAspectRatio = 1.0, //The size ratio between the element and the horizontal axis of the main axis }) The gridview is created in the body, first set the window format as above: body:GridView( //divide the grid gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( //Fixed number of child elements on the horizontal axis crossAxisCount: 3, //Number of sub-elements on the horizontal axis









mainAxisSpacing: 2.0, //
Main axis spacing crossAxisSpacing: 2.0, //Horizontal axis spacing
childAspectRatio: 1.0 //Child element placement ratio
),

Then create specific elements (I use Image.network's network image address here):
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),
],
you can also refer to the location of my picture, I opened the Mtime.com :

find the picture you like, right click and select copy Picture link:

Then put the address into Image.network;

code show as below:

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),
         ],
        )
    )
    );
  }
}

The effect is as described above.