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]),
    );
  },
)
...