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),
],
)
)
);
}
}
效果如上所述。