17

Flutter应用信息

 4 years ago
source link: http://mp.weixin.qq.com/s?__biz=Mzg5MDAzNzkwNA%3D%3D&%3Bmid=2247483820&%3Bidx=1&%3Bsn=760c480c031b260d276917a3efc98990
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

真正开发一个完成的跨平台App需要针对不同的平台设置不同的应用信息

  • 比如应用标识、应用名称、应用图标、应用启动图等等

一. 应用标识

1.1. Android应用标识

Android应用标识在对应的Android目录下:Android/app/build.gradle

  • applicationId:是打包时的应用标识

defaultConfig {
        // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
        applicationId "com.coderwhy.catefavor"
        minSdkVersion 16
        targetSdkVersion 28
        versionCode flutterVersionCode.toInteger()
        versionName flutterVersionName
        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
    }
UzmUf2m.jpg!web Android应用标识

1.2. iOS应用标识

iOS应用标识在对应的iOS目录下:ios/Runner/Info.plist(可以通过Xcode打开来进行修改)

EVfU3yi.jpg!web iOS应用标识

二. 应用名称

2.1. Android应用名称

Android应用名称在对应的Android目录下:android/app/src/main/AndroidMainifest.xml

eaqmAjv.jpg!web Android应用名称

2.2. iOS应用名称

iOS应用名称在对应的iOS目录下:ios/Runner/Info.plist(可以通过Xcode打开来进行修改)

fyIn2eq.jpg!web iOS应用名称

三. 应用图标

3.1. Android应用图标

官方建议将图标(icon)根据不同的dpi放置在res/mipmap文件夹下。

mQjEfaU.png!web Android icon location Qr6VzmQ.jpg!web img

3.2. iOS应用图标

iOS的应用图标在ios/Runner/Assets.xcassets/AppIcon.appiconset中管理(可以直接打开Xcode将对应的图标拖入)

2auY7na.jpg!web iOS应用图标

四. 应用启动图

4.1. Android应用启动图

Android中默认的启动图是一片空白的,这是Flutter的默认设置效果。

  • 在哪里设置呢?android/app/src/main/res/drawable/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/launcher_image"/>
    </item>-->
</layer-list>

我们可以进行如下修改:

第一步:将对应的启动图片,添加到对应的minimap文件夹中

qM7Fz2f.jpg!web 启动图

第二步:修改launch_background.xml文件如下:

  • 注意:我这里启动图命名为launcher_image,需要修改为你的名称

<?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/launcher_image"/>
    </item>
</layer-list>

4.2. iOS应用启动图

iOS需要两步来完成:

第一步:将启动图片添加到资源依赖中

jEzAn2I.jpg!web 添加依赖的启动图

第二步:在LaunchScreen.storyboard中,添加一个ImageView,并且添加约束

meqyquJ.jpg!web LaunchScreen的布局

备注:所有内容首发于公众号,之后除了Flutter也会更新其他技术文章,TypeScript、React、Node、uniapp、mpvue、数据结构与算法等等,也会更新一些自己的学习心得等,欢迎大家关注

B73qi2I.jpg!web 公众号

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK