flutter 輪播圖動(dòng)態(tài)加載網(wǎng)絡(luò)圖片的方法
Flutter是谷歌的移動(dòng)UI框架,可以快速在iOS和Android上構(gòu)建高質(zhì)量的原生用戶界面。 Flutter可以與現(xiàn)有的代碼一起工作。在全世界,F(xiàn)lutter正在被越來越多的開發(fā)者和組織使用,并且Flutter是完全免費(fèi)、開源的。
Swiper,網(wǎng)上很多例子只是加載固定的幾張圖,并且頁(yè)面只有一個(gè)輪播圖,在實(shí)際應(yīng)用中,可能會(huì)遇到類似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(),//使用的官方的 分?jǐn)?shù)下標(biāo) children:AspecRaticImgs(pro.image),//這里是一個(gè)List<String>類型的參數(shù),存放的圖片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循環(huán),發(fā)現(xiàn)不行 會(huì)報(bào)錯(cuò),說我add時(shí)用了空對(duì)象,頭疼,與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(//這個(gè)加載更加舒服,當(dāng)在加載中的時(shí)候,有一個(gè)加載進(jìn)度
imageUrl: url,
height: 400,
fit: BoxFit.cover,
placeholder: CustomWidgets.loadingPlaceHolder,
errorWidget: Image.asset('images/bg_gray.png',height: 400),
);
}).toList();
}
總結(jié)
以上所述是小編給大家介紹的flutter 輪播圖動(dòng)態(tài)加載網(wǎng)絡(luò)圖片的方法,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
如果你覺得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!
相關(guān)文章
Android 實(shí)現(xiàn)定時(shí)器的四種方式總結(jié)及實(shí)現(xiàn)實(shí)例
這篇文章主要介紹了Android 實(shí)現(xiàn)定時(shí)器的四種方式總結(jié)及實(shí)現(xiàn)實(shí)例的相關(guān)資料,這里對(duì)定時(shí)器進(jìn)行詳解,并附實(shí)例代碼,需要的朋友可以參考下2016-12-12
Android拍照保存在系統(tǒng)相冊(cè)不顯示的問題解決方法
我們保存相冊(cè)到Android手機(jī)的時(shí)候,然后去打開系統(tǒng)圖庫(kù)找不到我們想要的那張圖片,那是因?yàn)槲覀儾迦氲膱D片還沒有更新的緣故,下面與大家分享下此問題的解決方法2013-06-06
Android自定義橫向滑動(dòng)菜單的實(shí)現(xiàn)
這篇文章主要介紹了Android自定義橫向滑動(dòng)菜單的實(shí)現(xiàn),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05
Android 中View.onDraw(Canvas canvas)的使用方法
這篇文章主要介紹了Android 中View.onDraw(Canvas canvas)的使用方法的相關(guān)資料,希望通過本文能幫助到大家,需要的朋友可以參考下2017-09-09
Android實(shí)現(xiàn)檢測(cè)手機(jī)搖晃的監(jiān)聽器
本文給大家分享一段代碼實(shí)現(xiàn)檢測(cè)手機(jī)搖晃的監(jiān)聽器,代碼簡(jiǎn)單易懂,非常不錯(cuò),感興趣的朋友參考下吧2016-12-12
Android Intent與IntentFilter案例詳解
這篇文章主要介紹了Android Intent與IntentFilter案例詳解,本篇文章通過簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-08-08

