Flutter加載圖片的多樣玩法匯總
加載本地圖片
在項(xiàng)目目錄下創(chuàng)建assets文件夾,再在其文件夾下創(chuàng)建images文件夾,后面將需要的圖片復(fù)制到其中即可

在pubspec.yaml文件中添加引用
flutter:
uses-material-design: true
assets:
- assets/images/

在Container中加載本地圖片
Container(
width: 400.0,//容器寬度
height: 100.0,//容器高度
margin: const EdgeInsets.all(10.0),
child: Image.asset('assets/images/bg.jpg'),
),
圓角本地圖片
效果圖

代碼
Container(
decoration: ShapeDecoration(
image: const DecorationImage(
image: AssetImage('assets/images/bg.jpg'),//加載本地圖片
fit: BoxFit.cover
),
shape:RoundedRectangleBorder(borderRadius: BorderRadiusDirectional.circular(10.0))
),
width: 400.0,//容器寬度
height: 100.0,//容器高度
margin: const EdgeInsets.all(10.0),//外邊距
)
加載網(wǎng)絡(luò)圖片-本地圖片占位圖
在網(wǎng)絡(luò)圖片未加載出來時(shí),顯示本地圖片,當(dāng)網(wǎng)絡(luò)圖片返回時(shí)替換本地圖片并展示一個(gè)深入淺出的動(dòng)畫,如果加載錯(cuò)誤,則顯示錯(cuò)誤圖
Container(//使用本地的圖片作為占位圖
width: 500.0,//容器寬度
height: 200.0,//容器高度
child: FadeInImage.assetNetwork(
placeholder: "assets/images/bg.jpg", //默認(rèn)占位圖
imageErrorBuilder: (context, error, stackTrace) {//如果加載網(wǎng)絡(luò)錯(cuò)誤,顯示錯(cuò)誤背景
return Container(
width: 500.0,
height: 200.0,
color: Colors.grey,
);
},
image: "https://i0.hdslb.com/bfs/album/85dcfb9ae68ec58b447d823448b27f26e3d69b23.jpg"),
),
加載網(wǎng)絡(luò)圖片-loading
效果

代碼
當(dāng)網(wǎng)絡(luò)圖片未加載完成時(shí),顯示loading動(dòng)畫,直到加載完成
Container(//使用加載loading作為占位圖
width: 500.0,
height: 150.0,
margin: const EdgeInsets.only(top: 10.0),
child: Image.network(
"https://i0.hdslb.com/bfs/album/85dcfb9ae68ec58b447d823448b27f26e3d69b23.jpg",
errorBuilder: (context,error,stackTrace){
return CircularProgressIndicator();
},
loadingBuilder: (context,child,loadingProgress){
if(loadingProgress == null)return child;
return Container(
alignment: Alignment.center,
child: CircularProgressIndicator(
value: loadingProgress.expectedTotalBytes != null ?
loadingProgress.cumulativeBytesLoaded / loadingProgress.expectedTotalBytes! : null,
),
);
},
),
),圓角、邊框、漸變
| BoxDecoration | 解釋 |
|---|---|
| color | 背景顏色 |
| image | 背景圖片 |
| border | 邊框 |
| borderRadius | 圓角 |
| gradient | 漸變 |
| shape | 形狀 |
Container( //單組件布局容器,只允許有一個(gè)子組件
alignment: Alignment.center,//對(duì)齊方式:居中
width: 500.0,//容器寬度
height: 200.0,//容器高度
//color: Colors.blue,容器背景顏色
padding: const EdgeInsets.all(10.0),//外邊距
margin: const EdgeInsets.all(10.0),//內(nèi)邊距
decoration: BoxDecoration(//類似原生Android的XML創(chuàng)建樣式一樣
gradient: const LinearGradient(colors: [Colors.red,Colors.green,Colors.amber]),//線性漸變,需要先注釋原有存在的背景顏色語句
border: Border.all(color:Colors.black,width: 5.0),//繪制邊框,邊框顏色為黑色,邊框?qū)挾葹?
borderRadius: const BorderRadius.all(Radius.circular(10.0)),//設(shè)置邊框圓角
shape: BoxShape.rectangle//盒子樣式形狀
),
child: const Text(容器內(nèi)子組建
'Hello World!',
style: TextStyle(fontSize: 20.0,color: Colors.white),
),
),
內(nèi)邊距和外邊距使用如下:
padding: const EdgeInsets.all(10.0),//外邊距 margin: const EdgeInsets.all(10.0),//內(nèi)邊距
總結(jié)
到此這篇關(guān)于Flutter加載圖片的文章就介紹到這了,更多相關(guān)Flutter加載圖片內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Android程序啟動(dòng)時(shí)出現(xiàn)黑屏問題的解決方法
這篇文章主要介紹了Android程序啟動(dòng)時(shí)出現(xiàn)黑屏問題的解決方法,分析了黑屏出現(xiàn)的原因及相應(yīng)的解決方法,需要的朋友可以參考下2016-08-08
Android實(shí)現(xiàn)多線程下載文件的方法
這篇文章主要介紹了Android實(shí)現(xiàn)多線程下載文件的方法,以實(shí)例形式較為詳細(xì)的分析了Android多線程文件傳輸及合并等操作的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10
Android實(shí)現(xiàn)自定義帶文字和圖片Button的方法
這篇文章主要介紹了Android實(shí)現(xiàn)自定義帶文字和圖片Button的方法,涉及Android針對(duì)Button按鈕的布局與設(shè)計(jì)技巧,需要的朋友可以參考下2015-05-05
Android自定義Dialog實(shí)現(xiàn)通用圓角對(duì)話框
這篇文章主要為大家詳細(xì)介紹了Android自定義Dialog實(shí)現(xiàn)通用圓角對(duì)話框,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-11-11
android中ProgressDialog與ProgressBar的使用詳解
本篇文章是對(duì)android中ProgressDialog與ProgressBar的使用進(jìn)行了詳細(xì)的分析介紹,需要的朋友參考下2013-06-06
android之json數(shù)據(jù)過長(zhǎng)打印不全問題的解決
這篇文章主要介紹了android之json數(shù)據(jù)過長(zhǎng)打印不全問題的解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-04-04
Android實(shí)戰(zhàn)打飛機(jī)游戲之實(shí)現(xiàn)主角以及主角相關(guān)元素(3)
這篇文章主要為大家詳細(xì)介紹了Android實(shí)戰(zhàn)打飛機(jī)游戲之實(shí)現(xiàn)主角以及主角相關(guān)元素,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-07-07

