Flutter中的圖片加載
Flutter中加載遠程圖片相對比較容易簡單,如下:
...
child:Image.network(
url,//圖片的url
width:100,//設置圖片寬度
height:100,//設置圖片高度
),
...
想要在Flutter中加載本地圖片龙致,則需要進行如下操作:
首先:在根目錄下新建images文件绞佩,同時在images文件夾內新建2.0x和3.0x兩個文件。如圖所示:
image.png
然后操灿,在建完文件后,需要將其中的所有圖片在pubspec.yaml文件中進行聲明,如下所示:
image.png
最后栈拖,只需要在代碼中進行調用即可。
...
child:Image.asset(
"images/android.png",
width:100,
height:100,
),
...
Flutter中的兩種圓形圖片的實現方法
第一種:
...
decoration:BoxDecoration(
borderRadius:BorderRadius.circular(150),
image:DecorationImage(
image:NetworkImage(url),
fit:BoxFit.cover,
)
),
...
第二種:
...
child:clipoval(
child:Image.network(
url,
width:100,
height:100,
fit:BoxFit.cover,
)
),
...
Flutter中的ListView
最后我們再來講一講没陡,Flutter中的Listview的寫法:
...
child:ListView(
children: <Widget>[
ListTile(
leading: Image.network(url),//在前面顯示圖片
title: Text(title),//主標題
subtitle: Text(subtitle),//副標題
trailing: Image.network(url),//在后面顯示圖片
)
...
ListTile(
leading: Image.network(url),//在前面顯示圖片
title: Text(title),//主標題
subtitle: Text(subtitle),//副標題
trailing: Image.network(url),//在后面顯示圖片
)
],
)
當然涩哟,在我們平時使用的過程中索赏,用到的更多是動態(tài)加載數據,而不是這樣的靜態(tài)寫法贴彼。
動態(tài)加載:
...
child:ListView.builder(
itemCount:list.length,
itemBuilder:(context,index){
return ListTile(
title:Text(list[index]),
);
},
)
...