第四百五十回

文章目录

  • 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.mzph.cn/news/803437.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

计算机的发展趋势

计算机的发展趋势

本文 我们来说计算机的发展趋势 目前来讲 计算机是朝着 巨型化 微型化 网络化 智能化发展 巨型化 指功能巨型化 是指其高速运算、大存储容量和强功能的巨型计算机。其运算能力一般在每秒百亿次以上、内存容量在几百兆字节以上。 主要用于航空航天、军事、气象、人工智能、生…
阅读更多...
业务逻辑之身份认证

业务逻辑之身份认证

实现业务功能的逻辑不严谨导致的漏洞 业务流程分类 用户身份验证 会话管理 角色和权限识别 资源访问 交易和支付 密码重置和安全设置 日志记录和审计 url参数 某些参数可以表示用户权限（身份） http请求头 用户身份验证信息存在请求头部中的 Authorizatio…
阅读更多...
单链表学习

单链表学习

//静态链表&#xff0c;只往后看&#xff0c;找前面必须遍历 //算法题用数组解题更快速 //初始化,头节点为空 //将x插入到头节点 //将x插到结点k的后面 //将下标k的后面的点删掉 #include<algorithm> #include<iostream> #include<cstring> #include<queu…
阅读更多...
Leetcode:27.移除元素

Leetcode:27.移除元素

题目要求 给你一个数组 nums 和一个值 val&#xff0c;你需要 原地 移除所有数值等于 val 的元素&#xff0c;并返回移除后数组的新长度。 不要使用额外的数组空间&#xff0c;你必须仅使用 O(1) 额外空间并 原地 修改输入数组。 元素的顺序可以改变。你不需要考虑数组中超出…
阅读更多...
智能单灯控制器 计讯物联TL112

智能单灯控制器 计讯物联TL112

智能单灯控制器集成了先进技术的照明控制设备&#xff0c;它极大地改变了传统照明方式&#xff0c;并使之更加智能化。计讯物联智能单灯控制器TL112广泛应用于道路、景区、园区、隧道等场景智慧路灯杆使用。 　　 　　智能单灯控制器通过集成最先进的传感器、控制模块和通信技术…
阅读更多...
基于vue实现动态table

基于vue实现动态table

1、代码 <div style"height: 600px; overflow: scroll;"> <!-- height: 600px; overflow: scroll;作用是超出页面可以滑动 --><div ng-repeat"row in entity.procedureList"><cb-title title"工序{{row.procedireLocation}}&quo…
阅读更多...
SpringBoot整合RabbitMQ，三种交换机类型示例

SpringBoot整合RabbitMQ，三种交换机类型示例

SpringBoot整合RabbitMQ&#xff0c;三种交换机类型示例 1、流程概括 2、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-amqp</artifactId></dependency>3、配置RabbitMQ连接 在a…
阅读更多...
【C++成长记】C++入门 |auto、范围for、nullptr

【C++成长记】C++入门 |auto、范围for、nullptr

&#x1f40c;博主主页&#xff1a;&#x1f40c;​倔强的大蜗牛&#x1f40c;​ &#x1f4da;专栏分类&#xff1a;C❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 目录 一、auto关键字 1、auto简介 2、auto的使用细则 &#xff08;1&#xff09; auto与指针和引用结合起…
阅读更多...
多线程入门

多线程入门

文章目录 多线程相关的概念什么是多线程多线程的创建方式继承Thread方式实现Runable方式两种方式比较Thread类中常用方法 多线程相关的概念 并发与并行 并行&#xff1a;在同一时刻&#xff0c;有多个任务在多个CPU上同时执行。并发&#xff1a;在同一时刻&#xff0c;有多个任…
阅读更多...
[网鼎杯 2020 玄武组]SSRFMe

[网鼎杯 2020 玄武组]SSRFMe

[网鼎杯 2020 玄武组]SSRFMe 源码 <?php function check_inner_ip($url) {$match_resultpreg_match(/^(http|https|gopher|dict)?:\/\/.*(\/)?.*$/,$url);if (!$match_result){die(url fomat error);}try{$url_parseparse_url($url);}catch(Exception $e){die(url foma…
阅读更多...
Linux内核

Linux内核

一、 内核开发与逻辑开发对比 内核开发&#xff1a; 需要应用程序调用API去在操作系统里对硬件进行操作。操作系统不允许用户直接去通过置GPIO口1或者0去控制硬件&#xff0c;为了管理这一切。操作系统将整个开发中分成了两个空间&#xff0c;一个是用户空间&#xff08;上两…
阅读更多...
HarmonyOS 开发-Navigation页面跳转对象传递案例

HarmonyOS 开发-Navigation页面跳转对象传递案例

介绍 本示例主要介绍在使用Navigation实现页面跳转时&#xff0c;如何在跳转页面得到转入页面传的类对象的方法。实现过程中使用了第三方插件class-transformer&#xff0c;传递对象经过该插件的plainToClass方法转换后可以直接调用对象的方法&#xff0c; 效果图预览 使用说…
阅读更多...
pta L1-011 A-B

pta L1-011 A-B

L1-011 A-B 分数 20 全屏浏览 切换布局 作者 陈越 单位 浙江大学 本题要求你计算A−B。不过麻烦的是&#xff0c;A和B都是字符串 —— 即从字符串A中把字符串B所包含的字符全删掉&#xff0c;剩下的字符组成的就是字符串A−B。 输入格式&#xff1a; 输入在2行中先后给出…
阅读更多...
YOLOv9改进策略 ：小目标 | 新颖的多尺度前馈网络(MSFN) | 2024年4月最新成果

YOLOv9改进策略 ：小目标 | 新颖的多尺度前馈网络(MSFN) | 2024年4月最新成果

💡💡💡本文独家改进：多尺度前馈网络(MSFN)，通过提取不同尺度的特征来增强特征提取能力，2024年最新的改进思路 💡💡💡创新点：多尺度前馈网络创新十足，抢先使用 💡💡💡如何跟YOLOv8结合：1）放在backbone后增强对全局和局部特征的提取能力；2）放在detect…
阅读更多...
蝙蝠优化算法（bat optimization algorithm）

蝙蝠优化算法（bat optimization algorithm）

注意&#xff1a;本文引用自专业人工智能社区Venus AI 更多AI知识请参考原站 &#xff08;[www.aideeplearning.cn]&#xff09; 算法背景 蝙蝠优化算法&#xff08;Bat Algorithm&#xff09;是一种基于群体智能的优化算法&#xff0c;它的灵感来源于蝙蝠捕食时的回声定位行…
阅读更多...
Linux（Ubuntu）中创建【samba】服务，用于和Windows系统之间共享文件

Linux（Ubuntu）中创建【samba】服务，用于和Windows系统之间共享文件

目录 1.先介绍一下什么是Samba 2.安装&#xff0c;配置服务 安装 配置&#xff08;smb.conf&#xff09; 配置用户 3.出现的问题&#xff08;Failed to add entry for user XXXX&#xff09; 4.创建文件夹 5.windows访问 6.其他 Samba【服务状态】查看 Samba服务启动…
阅读更多...
面试必问 - CSS 中元素居中小技巧

面试必问 - CSS 中元素居中小技巧

在网页设计中&#xff0c;居中是一个至关重要的布局技巧&#xff0c;能够确保你的页面在不同设备和屏幕尺寸上呈现出优雅的样式。 在这篇文章中&#xff0c;将介绍一些 CSS 居中的基本技巧&#xff0c;适用于各种场景。 1. 水平居中 文本水平居中 通过设置 text-align: cen…
阅读更多...
Training - Kubeflow 的 PyTorchJob 配置 DDP 分布式训练 (ncclInternalError)

Training - Kubeflow 的 PyTorchJob 配置 DDP 分布式训练 (ncclInternalError)

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://blog.csdn.net/caroline_wendy/article/details/137569332 Kubeflow 的 PyTorchJob 是 Kubernetes 自定义资源&#xff0c;用于在 Kubernetes 上运行 PyTorch 训练任务&#xff0c;是 K…
阅读更多...
网格矢量如何计算莫兰指数

网格矢量如何计算莫兰指数

网格矢量如何计算莫兰指数 引言 遇到一个问题&#xff0c;计算矢量网格的莫兰指数。 概念解释 莫兰指数 莫兰指数&#xff08;Moran’s Index&#xff09;是一种空间自相关指标&#xff0c;用于衡量空间数据的相似性和聚集程度。它可以用来描述一个区域与其邻近区域之间的属…
阅读更多...
MySQL之函数：字符串函数、日期函数、数值函数、流程函数

MySQL之函数：字符串函数、日期函数、数值函数、流程函数

字符串函数&#xff1a;用于对文本数据进行操作和处理 CONCAT&#xff1a;用于将多个字符串连接成一个字符串。 SELECT CONCAT(Hello, , World); -- 输出: Hello WorldSUBSTRING&#xff1a;用于截取字符串的子串。包前不包后&#xff0c;从1开始 SELECT SUBSTRING(MySQL, 1, …
阅读更多...
最新文章

Copyright @ 2022~2023