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

在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)絡圖片-本地圖片占位圖
在網(wǎng)絡圖片未加載出來時,顯示本地圖片,當網(wǎng)絡圖片返回時替換本地圖片并展示一個深入淺出的動畫,如果加載錯誤,則顯示錯誤圖
Container(//使用本地的圖片作為占位圖
width: 500.0,//容器寬度
height: 200.0,//容器高度
child: FadeInImage.assetNetwork(
placeholder: "assets/images/bg.jpg", //默認占位圖
imageErrorBuilder: (context, error, stackTrace) {//如果加載網(wǎng)絡錯誤,顯示錯誤背景
return Container(
width: 500.0,
height: 200.0,
color: Colors.grey,
);
},
image: "https://i0.hdslb.com/bfs/album/85dcfb9ae68ec58b447d823448b27f26e3d69b23.jpg"),
),
加載網(wǎng)絡圖片-loading
效果

代碼
當網(wǎng)絡圖片未加載完成時,顯示loading動畫,直到加載完成
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( //單組件布局容器,只允許有一個子組件
alignment: Alignment.center,//對齊方式:居中
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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Android實現(xiàn)自定義帶文字和圖片Button的方法
這篇文章主要介紹了Android實現(xiàn)自定義帶文字和圖片Button的方法,涉及Android針對Button按鈕的布局與設(shè)計技巧,需要的朋友可以參考下2015-05-05
Android自定義Dialog實現(xiàn)通用圓角對話框
這篇文章主要為大家詳細介紹了Android自定義Dialog實現(xiàn)通用圓角對話框,具有一定的參考價值,感興趣的小伙伴們可以參考一下2018-11-11
android中ProgressDialog與ProgressBar的使用詳解
本篇文章是對android中ProgressDialog與ProgressBar的使用進行了詳細的分析介紹,需要的朋友參考下2013-06-06
android之json數(shù)據(jù)過長打印不全問題的解決
這篇文章主要介紹了android之json數(shù)據(jù)過長打印不全問題的解決,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-04-04
Android實戰(zhàn)打飛機游戲之實現(xiàn)主角以及主角相關(guān)元素(3)
這篇文章主要為大家詳細介紹了Android實戰(zhàn)打飛機游戲之實現(xiàn)主角以及主角相關(guān)元素,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-07-07

