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

效果如上所述。

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

Flutter学习笔记 --多子元素组件
多子元素组件有很多,其中常用的有Scaffold.AppBar.Row.Column.ListView.GridView.CustomScrollView.Flex.Wrap.Flow等. 1.Sca ...
Flutter学习笔记（10）--容器组件、图片组件
如需转载,请注明出处:Flutter学习笔记(10)--容器组件.图片组件上一篇Flutter学习笔记(9)--组件Widget我们说到了在Flutter中一个非常重要的理念"一切皆为组件 ...
Flutter学习笔记（18）--Drawer抽屉组件
如需转载,请注明出处:Flutter学习笔记(18)--Drawer抽屉组件 Drawer(抽屉组件)可以实现类似抽屉拉出和推入的效果,可以从侧边栏拉出导航面板.通常Drawer是和ListView组 ...
Flutter学习笔记 —— 完成一个简单的新闻展示页
Flutter学习笔记 -- 完成一个简单的新闻展示页前言思路分析案例代码结束语上图前言刚学Flutter不久,今天我们来看看如何使用 Container & ListView实 ...
[Unity学习笔记：FPS游戏制作（3）]子弹拖尾，碰撞与枪口火焰效果
往期博客[Unity学习笔记:FPS游戏制作(2)] 发射子弹----(2021.6.20学习笔记) 文章目录一,实现思路二,粒子效果的实现 (1)子弹拖尾特效的实现 (2)枪口火焰特效的实现 ( ...
vue学习笔记-03-浅谈组件-概念，入门，如何用props给组件传值？
vue学习笔记-03-浅谈组件-概念,入门,如何用props给组件传值? 文章目录 vue学习笔记-03-浅谈组件-概念,入门,如何用props给组件传值? 什么是组件? 为什么要使用组件? 如何使用 ...
Unity学习笔记—二次元日系游戏制作（实践篇-游戏初始化场景制作）
原教程:siki:二次元日系游戏制作工具 - live2dSDK入门教程 http://www.sikiedu.com/my/course/282 (上)Unity学习笔记-二次元日系游戏制作(理论篇 ...
Flutter学习笔记（一）
Flutter学习笔记(一) 学习前言 dart安装 vscode配置持续更新中学习前言最近准备学习Flutter,参考B站 Dart Flutter教程_2022精讲Dart Flutter3 ...
Flutter学习笔记（二）登陆注册界面的实现
Flutter学习笔记(二)登陆注册界面的实现简单的登录和注册界面的布局 SharedPreferences存储数据页面路由和参数传递的心得这几天按照顺序先完成了登录和注册的页面,没有什么特别的 ...

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

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

最新文章

热门文章