flutter 轮播图动态加载网络图片的方法
时间:2022-07-27
本文章向大家介绍flutter 轮播图动态加载网络图片的方法,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界,Flutter正在被越来越多的开发者和组织使用,并且Flutter是完全免费、开源的。
Swiper,网上很多例子只是加载固定的几张图,并且页面只有一个轮播图,在实际应用中,可能会遇到类似ins这种,加载列表,并且都是多图模式的情况。
需要添加依赖包
flukit: ^1.0.0
引用 import 'package:flukit/flukit.dart';
//这一坨放在自己想要显示轮播图的地方
AspectRatio(
aspectRatio:1.0,// 16.0 / 9.0,
child: Swiper(
indicatorAlignment: AlignmentDirectional.topEnd,
circular: true,
autoStart:false,
indicator: NumberSwiperIndicator(),//使用的官方的 分数下标
children:AspecRaticImgs(pro.image),//这里是一个List<String 类型的参数,存放的图片Url列表
),
);
//轮播图片
class NumberSwiperIndicator extends SwiperIndicator{
@override
Widget build(BuildContext context, int index, int itemCount) {
if(itemCount 1){
return Container(
decoration: BoxDecoration(
color: Colors.black45,
borderRadius: BorderRadius.circular(20.0)
),
margin: EdgeInsets.only(top: 10.0,right: 5.0),
padding: EdgeInsets.symmetric(horizontal: 6.0,vertical: 2.0),
child: Text("${++index}/$itemCount", style: TextStyle(color: SQColor.white, fontSize: 18.0)),
);
}else{
return Container();
}
}
}
//这里我一开始用foreach循环,发现不行 会报错,说我add时用了空对象,头疼,与C#真的是大相径庭
List<Widget AspecRaticImgs(List<String imgUrl) {
return imgUrl.map<Widget ((url){
return Image.network(
url,
height: 400,
fit: BoxFit.cover,
);
}).toList();
}
List<Widget AspecRaticImgs(List<String imgUrl) {
return imgUrl.map<Widget ((url){
return CachedNetworkImage(//这个加载更加舒服,当在加载中的时候,有一个加载进度
imageUrl: url,
height: 400,
fit: BoxFit.cover,
placeholder: CustomWidgets.loadingPlaceHolder,
errorWidget: Image.asset('images/bg_gray.png',height: 400),
);
}).toList();
}
总结
以上所述是小编给大家介绍的flutter 轮播图动态加载网络图片的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。 如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
- Appium+python自动化29-toast消息
- guestfs这么强大你知道吗
- appium+python自动化30-list定位(find_elements)
- python笔记4-遍历文件夹目录os.walk()
- 【专知国庆特刊-PyTorch手把手深度学习教程系列01】一文带你入门优雅的PyTorch
- python接口自动化14-multipart/form-data上传图片
- 【干货】RL-GAN For NLP: 强化学习在生成对抗网络文本生成中扮演的角色
- python接口自动化15-multipart/form-data表单提交
- appium+python自动化32-android_uiautomator定位进阶版
- appium+python自动化33-解锁九宫格(TouchAction)
- 用qemu中最少的代码实现一个kvm模拟器
- 关关的刷题日记07——Leetcode 26. Remove Duplicates from Sorted Array 方法1
- openstack如何扩展API之一:新添加API
- 值得收臧 | 从零开始搭建带GPU加速的深度学习环境(操作系统、驱动和各种机器学习库)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法