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),//在后面显示图片
)
],
)
当然,在我们平时使用的过程中,用到的更多是动态加载数据,而不是这样的静态写法。
动态加载:
...
child:ListView.builder(
itemCount:list.length,
itemBuilder:(context,index){
return ListTile(
title:Text(list[index]),
);
},
)
...
网友评论