第四百五十回

news/2024/11/16 21:40:43/

文章目录

  • 1. 知识回顾
  • 2. 使用方法
  • 3. 示例代码
  • 4. 经验与总结
    • 4.1 经验分享
    • 4.2 内容总结

我们在上一章回中介绍了"overlay_tooltip简介"相关的内容，本章回中将再谈flutter_native_splash包.闲话休提，让我们一起Talk Flutter吧。

1. 知识回顾

我们在第四百一十一回介绍了flutter_native_splash包的概念和用法，该包主要用来实现App的程序启动页面。不过我们当时运行后并没有实现启动页面，经过仔细
分析后我可以使用这个包实现splash页面，本章回中将继续介绍它的用法，同时分享相关的使用技巧和经验。

2. 使用方法

首先创建一个新的yaml文件，文件名必须是flutter_native_splash.yaml;

  • 在文件中配置相关信息,这些信息主要用来控制splash页面的颜色和图片等内容;
  • 运行命令：flutter_native_splash:create，生成splash页面需要的图片和相关资源文件；
  • 在main文件中添加代码，主要用来初始化包，并且启动splash页面；
  • 在主页面中停止splash页面，然后会自动显示程序的主页面；
    关于上面的步骤还有一些细节需要说明：
    上面的步骤中也可以不创建yaml配置文件，而是直接在pubspec.yaml文件中配置，不过要顶格，不能向加入插件一样有空格。我们推荐单独建立一个文件去配置splash;
    在代码中需要注意的是一定要移除splash页面，如果不移除splash，就不会进入主页面，导致程序一起卡着不动。
    运行命令生成图片和资源文件时必须在系统的终端中运行命令，IDE中无法识别dart命令。会报无法识别dart命令的错误： 运行命令时先切换到项目根目录下，不需要在create后面加path/flutter_native_splash.yaml(官方文档中介绍命令时需要添加路径)命令可以自动识别该文件，
    前提是flutter_native_splash.yaml文件位于项目根目录下。否则会报错误：Could not find file flutter_native_splash:create
    如果不想使用该插件了，可以把命令中的create替换成remove：flutter_native_splash:remove来删除该插件生成的关于splash的文件；
    运行命令后会在Android的drawble目录下生成background.png文件，同时在其它drawble-xxxdpi目录下生成splash.png和android12splash.png文件。
    同时也修改了launch_background.xml文件，修改内容就是修改背景图片和splash图片的名字。我感觉把背景从颜色修改成图片不太好.为此还修改了styl.xml中
    的内容。IOS平台下会修改info.plst和Runner/Asset目录下的LaunchImage图片。web等其它平台也会生成相应的文件,不过可以配置成false.这样就不生成了。
    此外，上面的步骤完成后可以在Android平台的程序上运行，在IOS平台上运行时需要把base.lproj拖入已经打开的xCode项目中，然后在弹窗中选择复制，这样就会
    复制一份启动项目的stroyboard到项目中。这个在官方文档中有详细介绍,我就不再介绍了。
    我总结为:先在yaml文件中的配置splash相关信息，然后通过命令生成不同分辨率下的splash图片，接着修改配置文件(launch_background.xml)中的内容应用
    于splash功能。最后是在代码中导入该功能,同时控制splash的启动时长。下面是运行命令时的结果，请大家参考，该结果与配置有关，配置不同生成产物不同：
your_pach% dart run flutter_native_splash:create
Building package executable... 
Built flutter_native_splash:create.
[Android] Creating default splash images
[Android] Creating default android12splash images
[Android] Creating dark mode android12splash images
[Android] Updating launch background(s) with splash image path...
[Android]  - android/app/src/main/res/drawable/launch_background.xml
[Android]  - android/app/src/main/res/drawable-v21/launch_background.xml
[Android] Updating styles...
[Android]  - android/app/src/main/res/values-v31/styles.xml
[Android] No android/app/src/main/res/values-v31/styles.xml found in your Android project
[Android] Creating android/app/src/main/res/values-v31/styles.xml and adding it to your Android project
[Android]  - android/app/src/main/res/values-night-v31/styles.xml
[Android] No android/app/src/main/res/values-night-v31/styles.xml found in your Android project
[Android] Creating android/app/src/main/res/values-night-v31/styles.xml and adding it to your Android project
[Android]  - android/app/src/main/res/values/styles.xml
[Android]  - android/app/src/main/res/values-night/styles.xml
[iOS] Creating  images
[iOS] Updating ios/Runner/Info.plist for status bar hidden/visible
[Web] Creating images
[Web] Creating images
[Web] Creating background images
[Web] Creating CSS
[Web] Updating index.html
╔════════════════════════════════════════════════════════════════════════════╗
║                       NEED A GREAT FLUTTER DEVELOPER?                      ║
╠════════════════════════════════════════════════════════════════════════════╣
║                                                                            ║
║   I am available!  Find me at https://www.linkedin.com/in/hansonjon/       ║
║                                                                            ║
╚════════════════════════════════════════════════════════════════════════════╝✅ Native splash complete.
Now go finish building something awesome! 💪 You rock! 🤘🤩
Like the package? Please give it a 👍 here: https://pub.dev/packages/flutter_native_splash

3. 示例代码

下面是程序的示例代码，与上一小节中的实现步骤完全匹配，请大家参考：

///yaml文件中的配置信息，可以参考官方文档color: "#42a5f5"#图片格式必须是pngimage: images/avata.png/// 在main文件中添加代码，主要用来初始化包，并且启动splash页面；WidgetsBinding widgetsBinding = WidgetsFlutterBinding.ensureInitialized();FlutterNativeSplash.preserve(widgetsBinding: widgetsBinding);runApp(const MyApp());
///  在MaterialApp的home属性对应的页面中移除splash页面void initState() {super.initState();///可以在这里添加一些延时在主程序页面中移除splash，不然无法显示页面FlutterNativeSplash.remove();}

编译并且运行上面的程序可以看到splash页面。我在这里就不演示程序的运行结果了，建议大家自己去实践。

4. 经验与总结

4.1 经验分享

这个插件看着简单，不过在使用时还有些细节，比如我上次就没有运行成功，反复分析后才运行成功，接下来我们分享一些使用过程总结的经验，详细如下：

  • 配置文件中内容需要专门对Android12适配，不然高于此版本的系统不会产生splash效果；
  • 官方关于配置文件的内容写的比较详细，有些参数无法理解的话可以参考github的介绍，它配有图形，或者看Android官方文档中关于splash的介绍也可以；
  • 使用命令生成图片时需要在电脑的终端运行命令，而且可以通过命令的运行结果查看生成的图片和xml等配置文件；
  • 如果手机上没有效果，试试单独启动app，而不是通过IDE直接运行app。我上次没有运行成功就是这个原因；

4.2 内容总结

使用这个插件实现splash页面可以总结为三个步骤：填写配置信息 -> 生成图片等资源 -> 代码中使用splash资源。如果不使用插件的话，我们需要分平台修改配置
信息，Andrid是在xml文件中，iOS是在Runner中。同时还需要UI设计师提供不同分辨率下的图片。这个插件与自己实现splash功能时的差别在于不需要分不同平台
去配置splash信息，而且只需要一张图片就可以。通过包中的命令可以生成多个平台上的splash文件，对于每个平台可以自动适配不同的分辨率，比如android会在
drawable-xxxdpi等5个目录下生成对应的splash文件。IOS会生成1x,2x和3x格式的图片。整体来说该包实现了跨平台的功能，效率高一些。

看官们，与"再谈flutter_native_splash包"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!


http://www.ppmy.cn/news/1412402.html

相关文章

PyTorch之计算模型推理时间

PyTorch之计算模型推理时间

一、参考资料 如何测试模型的推理速度 Pytorch 测试模型的推理速度 二、计算PyTorch模型推理时间 1. 计算CPU推理时间 import torch import torchvision import time import tqdm from torchsummary import summarydef calcCPUTime():model torchvision.models.resnet18()…
阅读更多...
[Java]网络编程

[Java]网络编程

网络编程概述 计算机网络： 把分布在不同地理区域的具有独立功能的计算机,通过通信设备与线路连接起来，由功能完善的软件实现资源共享和信息传递的系统。 Java是 Internet 上的语言，它从语言级上提供了对网络应用程序的支持，程序…
阅读更多...
Windows下docker-compose部署DolphinScheduler

Windows下docker-compose部署DolphinScheduler

参照：快速上手 - Docker部署(Docker) - 《Apache DolphinScheduler v3.1.0 使用手册》 - 书栈网 BookStack 下载源文件 地址：https://dolphinscheduler.apache.org/zh-cn/download/3.2.1 解压到指定目录，进入apache-dolphinscheduler-xxx-…
阅读更多...
Celery的任务流

Celery的任务流

Celery的任务流 在之前调用任务的时候只是使用delay()和apply_async()方法。但是有时我们并不想简单的执行单个异步任务，比如说需要将某个异步任务的结果作为另一个异步任务的参数或者需要将多个异步任务并行执行，返回一组返回值，为了实现此…
阅读更多...
2024/4/7周报

2024/4/7周报

文章目录 摘要Abstract文献阅读题目引言创新点Decoder-Encoder模型实验过程实验结果 深度学习LSTM变体Bidirectional LSTM（双向LSTM）GRUGRU代码实现 总结 摘要 本周阅读了一篇关于统计机器翻译的RNN编码器-解码器学习短语表示的文章。 文中提出了一种新…
阅读更多...
题目：画图，学用circle画圆形。

题目：画图，学用circle画圆形。

题目：画图，学用circle画圆形。　　　 There is no nutrition in the blog content. After reading it, you will not only suffer from malnutrition, but also impotence. The blog content is all parallel goods. Those who are worried about being …
阅读更多...
如何将本地仓库放到远程仓库中

如何将本地仓库放到远程仓库中

在我们仓库创建好之后&#xff0c;我们复制好ssh 接着我们需要使用git remote add<shortname><url>这个命令 shortname就是我们远程仓库的别名 接着使用git remote -v这个命令查看一下目前远程仓库的别名和地址 原本还有一个指令git branch -M main 指定分支的名…
阅读更多...
Paper Reading

Paper Reading

使用diffusion mode生成synthetic images&#xff0c;用于enhance traning data: 1. FreeMask: Synthetic Images with Dense Annotations Make Stronger Segmentation Models (NurIPS 2024) Challenges: Generating in-domain imagesGenerating high-quality imagesGenera…
阅读更多...
最新文章

Copyright @ 2022~2023