Flutter学习--项目实战（二）图片导入

本节主要学习flutter项目的本地图片导入
搞过移动开发的基本都知道app的图片资源大致分为两类一类为app的icon launch image，一类为项目中用的图片image。

一.App Icon与Launch image
首先我们来讲讲Flutter App的App Icon与Launch image如何添加,
flutter项目中安卓和iOS 的app icon和launch image是分开设置的，iOS app的设置直接去Xcode中打开iOS项目设置就行啦。这里我们主要讲一下安卓如何添加。
如下图所示

图片.png
app\src\main\res 文件夹下面有文件夹：mipmap-mdpi、mipmap-hdpi、mipmap-xhdpi、mipmap-xxhdpi、mipmap-xxxhdpi。

分别代表不同 dpi 屏幕所使用的icon图片。
dpi：

图像每英寸长度内的像素点数。
DPI（Dots Per Inch，每英寸点数）是一个量度单位，用于点阵数码影像，指每一英寸长度中，取样、可显示或输出点的数目。

这方面的设计的知识点有点广，我们就只要知道 mipmap-xhdpi、mipmap-xxhdpi、分别对应iOS中的二倍，三倍图就行了。我们在把图片添加到文件夹

图片.png

之后到AndroidManifest.xml文件中设置

android:icon="@mipmap/app_icon">

就设置好了，在Android模拟器上运行，可以看到了。

图片.png

接下来再来设置app的启动页图片。
我们把启动图片添加到文件夹

图片.png

然后到
launch_background.xml文件夹中，打开启动图的图片设置代码，并设置为自己图片的路径。

android:src="@mipmap/launch_image" />

重新运行一下，OK 。大功告成了！

图片.png

（赶紧关掉这个android 模拟器，感觉自己电脑卡爆了要！还是iOS的模拟器好用点。😁）

二.添加其他本地图片资源
flutter中添加普通图片资源不用Android和iOS分开设置啦，在flutter项目中统一设置就行了。

1.首先我们来看到pubspec.yaml文件夹，这个文件负责工程资源文件路径的设置。
可以看到代码

#   assets:
#    - images/a_dot_burr.jpeg
#    - images/a_dot_ham.jpeg

这里是设置图片文件路径的地方，默认是注释的，从这里可以看出，项目中的图片都是在一个images文件夹下的。

2.项目中并没有主动给我们生成images文件夹，所以我们要添加图片应该是自己创建images然后在文件夹下添加图片。
command+n

图片.png
选择创建Directory，文件夹名称为images。
然后把图片拷贝进文件夹，我们的图片资源就加载到工程中了。

3.来到pubspec.yaml文件中把图片路径设置好。

   assets:
    - images/a_dot_burr.jpeg
    - images/a_dot_ham.jpeg
    - images/tabbar_discover.png
    - images/tabbar_discover_hl.png
    - images/tabbar_chat.png
    - images/tabbar_chat_hl.png
    - images/tabbar_friends.png
    - images/tabbar_friends_hl.png
    - images/tabbar_mine.png
    - images/tabbar_mine_hl.png

接下来去代码中使用

 final List<BottomNavigationBarItem> _bottomItems = [
   BottomNavigationBarItem(
       icon: Image(height: 20, width: 20,image: AssetImage('images/tabbar_chat.png')),
       activeIcon: Image(height: 20,width: 20,image: AssetImage('images/tabbar_chat_hl.png')),
       title: Text('Wechat'),
   ),
   BottomNavigationBarItem(
       icon: Image(height: 20, width: 20,image: AssetImage('images/tabbar_friends.png')),
       activeIcon: Image(height: 20,width: 20,image: AssetImage('images/tabbar_friends_hl.png')),
       title: Text('Contact')
   ),
   BottomNavigationBarItem(
       icon: Image(height: 20, width: 20,image: AssetImage('images/tabbar_discover.png')),
       activeIcon: Image(height: 20,width: 20,image: AssetImage('images/tabbar_discover_hl.png')),
       title: Text('Discovery')
   ),
   BottomNavigationBarItem(
       icon: Image(height: 20, width: 20,image: AssetImage('images/tabbar_mine.png')),
       activeIcon: Image(height: 20,width: 20,image: AssetImage('images/tabbar_mine_hl.png')),
       title: Text('Mine')
   ),
 ];

运行效果：

图片.png
图片.png

成功咯😄