当前位置： 移动技术网 > IT编程>移动开发>Android > flutter 轮播图动态加载网络图片的方法

flutter 轮播图动态加载网络图片的方法

2019年09月06日  | 移动技术网IT编程  | 我要评论

失恋33天种子,45iii,北大青鸟教材

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 轮播图动态加载网络图片的方法,希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网