Flutter加載圖片的多樣玩法匯總
加載本地圖片
在項目目錄下創建assets文件夾,再在其文件夾下創建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),//外邊距 )
加載網絡圖片-本地圖片占位圖
在網絡圖片未加載出來時,顯示本地圖片,當網絡圖片返回時替換本地圖片並展示一個深入淺出的動畫,如果加載錯誤,則顯示錯誤圖
Container(//使用本地的圖片作為占位圖 width: 500.0,//容器寬度 height: 200.0,//容器高度 child: FadeInImage.assetNetwork( placeholder: "assets/images/bg.jpg", //默認占位圖 imageErrorBuilder: (context, error, stackTrace) {//如果加載網絡錯誤,顯示錯誤背景 return Container( width: 500.0, height: 200.0, color: Colors.grey, ); }, image: "https://i0.hdslb.com/bfs/album/85dcfb9ae68ec58b447d823448b27f26e3d69b23.jpg"), ),
加載網絡圖片-loading
效果
代碼
當網絡圖片未加載完成時,顯示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),//內邊距 decoration: BoxDecoration(//類似原生Android的XML創建樣式一樣 gradient: const LinearGradient(colors: [Colors.red,Colors.green,Colors.amber]),//線性漸變,需要先註釋原有存在的背景顏色語句 border: Border.all(color:Colors.black,width: 5.0),//繪制邊框,邊框顏色為黑色,邊框寬度為5 borderRadius: const BorderRadius.all(Radius.circular(10.0)),//設置邊框圓角 shape: BoxShape.rectangle//盒子樣式形狀 ), child: const Text(容器內子組建 'Hello World!', style: TextStyle(fontSize: 20.0,color: Colors.white), ), ),
內邊距和外邊距使用如下:
padding: const EdgeInsets.all(10.0),//外邊距 margin: const EdgeInsets.all(10.0),//內邊距
總結
到此這篇關於Flutter加載圖片的文章就介紹到這瞭,更多相關Flutter加載圖片內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- 利用Flutter制作一個摸魚桌面版App
- Flutter LinearProgressIndicator使用指南分析
- Flutter實現微信朋友圈功能
- Android Flutter制作一個修改組件屬性的動畫
- Flutter 開發一個登錄頁面