iOS开发Flutter探索

iOS开发Flutter探索-引用本地图片资源(5)

2020-06-16  本文已影响0人  泽泽伐木类

前言

关于引用本地图片资源主要分为以下2种情况:
1.当iOS端和Android端需要区别显示的时候,我们需要在Xcode和Android Studio 中分配添加响应图片;
2.iOS和Android共同资源,需要在fultter项目配置文件中添加;
关于在Xcode中如何添加图片资源这里就不赘述了,今天主要介绍一下在Android 项目端 和 flutter中如何添加;

Android端添加图片资源

截屏2020-06-15下午11.50.32.png
图片资源路径android[xxx_xxx_xxx]/app/src/main/res/
配置app_icon,打开AndroidManifest.xml
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.flutterappzeze">
    <!-- io.flutter.app.FlutterApplication is an android.app.Application that
         calls FlutterMain.startInitialization(this); in its onCreate method.
         In most cases you can leave this as-is, but you if you want to provide
         additional functionality it is fine to subclass or reimplement
         FlutterApplication and put your custom class here. -->
    <application
        android:name="io.flutter.app.FlutterApplication"
        android:label="flutterappzeze"     //  名称 display_name
        android:icon="@mipmap/ic_launcher">   //app_icon图标
        <activity
            android:name=".MainActivity"
            android:launchMode="singleTop"
         

配置launch_img,打开launch_background.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- Modify this file to customize your launch splash screen -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@android:color/white" />

    <!-- You can insert your own image assets here -->
   <item>
        //这里配置启动图    
        <bitmap
            android:gravity="center"
            android:src="@mipmap/launch_image" />
    </item> 
</layer-list>

flutter添加图片资源

截屏2020-06-16上午12.06.10.png
这里是在pubspec.yaml中配置添加
# The following section is specific to Flutter.
flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  assets:       //固定格式写法
   - images/a_dot_burr.png   //这里就是引入了一张图片资源 
   - images/a_dot_ham.png

  # An image asset can refer to one or more resolution-specific "variants", see
  # https://flutter.dev/assets-and-images/#resolution-aware.

我们在当前文件的同级目录command+N新建一个名字为imagesDirectory文件夹,并将公用的图片资源放入这里。
还有一种简单的方式就是直接在pubspec.yaml文件中

# To add assets to your application, add an assets section, like this:
 assets:  
   - images/
 # An image asset can refer to one or more resolution-specific "variants", see

就可以了,不需要将每张图片的名称追加到这里,这要确保在images下就可以了。

项目中使用
class _PendCourseState extends State<PendCourse> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('待上课程'),
      ),
      body: Center(
        child: Image(image: AssetImage('images/a_dot_burr.png'),width: 100,height: 80,),
      ),
    );
  }
}

总结

本篇文章并没有什么难道,主要就是梳理了一下flutter项目中的图片资源的引用方式和使用方式。下一步我将开始详细的撩一下ListView!大家可以持续关注哦!

上一篇下一篇

猜你喜欢

热点阅读