当前位置: 首页 > news >正文

华为鸿蒙应用--欢迎页SplashPage+倒计时跳过(自适应手机和平板)-ArkTs

鸿蒙ArkTS 开发欢迎页SplashPage+倒计时跳过,可自适应平板和手机

一、SplashPage.ts
import { BreakpointSystem, BreakPointType, Logger, PageConstants, StyleConstants } from '@ohos/common';
import router from '@ohos.router';@Entry
@Component
struct SplashPage {@StorageProp('currentBreakpoint') currentBreakpoint: string = 'sm';private breakpointSystem = new BreakpointSystem();private intervalId: number = 0;@State  countdownTime: number = PageConstants.DELAY_TIME;private splash: Resource[] = [$r('app.media.img_splash1'), $r('app.media.img_splash2'), $r('app.media.img_splash3')];// 获取min到max的随机正整数getRandom(min, max) {return Math.floor(Math.random() * (max - min + 1) + min)}build() {Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) {Button(this.countdownTime + "秒 跳过", { type: ButtonType.Capsule, stateEffect: true }).alignSelf(ItemAlign.End).margin({ top: $r('app.float.vp_thirty_two'), right: $r('app.float.vp_sixteen') }).onClick(() => {this.routerMain();})Column() {Image(this.splash[this.getRandom(0, 2)])  // 每次进入随机展示一张欢迎图片.width(new BreakPointType({sm: $r('app.float.splash_image_size'),md: $r('app.float.splash_image_size'),lg: $r('app.float.splash_image_size_lg')  // 手机和平板使用不同的图片宽度}).getValue(this.currentBreakpoint)).aspectRatio(PageConstants.IMAGE_ASPECT_RATIO).objectFit(ImageFit.Contain)}.justifyContent(FlexAlign.Start).alignItems(HorizontalAlign.Center).flexGrow(StyleConstants.FLEX_GROW).margin({ top: new BreakPointType({sm: $r('app.float.vp_hundred'),md: $r('app.float.vp_hundred'),lg: $r('app.float.vp_fifty')   // 手机和平板不同的margin}).getValue(this.currentBreakpoint) })Text($r('app.string.splash_desc')).fontColor($r('app.color.color_797979')).fontSize($r('app.float.small_font_size')).margin({ top: $r('app.float.vp_one'), bottom: $r('app.float.vp_one') })Text($r('app.string.splash_filings')).fontColor($r('app.color.color_797979')).fontSize($r('app.float.small_font_size')).margin({ top: $r('app.float.vp_one'), bottom: $r('app.float.empty_image_size') })}.height(StyleConstants.FULL_HEIGHT).width(StyleConstants.FULL_WIDTH).backgroundColor($r('app.color.page_background'))}// 倒计时countdown = () => {this.countdownTime -= 1;if (this.countdownTime == 0) {clearInterval(this.intervalId)this.routerMain();}}// 跳转首页routerMain = () => {router.replaceUrl({ url: PageConstants.MAIN_PAGE_URL }).catch((err: Error) => {Logger.error(JSON.stringify(err));})}aboutToAppear() {this.breakpointSystem.register();this.intervalId = setInterval(this.countdown, 1000);}aboutToDisappear() {this.breakpointSystem.unregister();clearInterval(this.intervalId);}
}

工具:BreakpointSystem, BreakPointType, Logger, PageConstants, StyleConstants等工具见:华为鸿蒙应用--底部导航栏Tabs(自适应手机和平板)-CSDN博客

相关文章:

华为鸿蒙应用--欢迎页SplashPage+倒计时跳过(自适应手机和平板)-ArkTs

鸿蒙ArkTS 开发欢迎页SplashPage倒计时跳过,可自适应平板和手机: 一、SplashPage.ts import { BreakpointSystem, BreakPointType, Logger, PageConstants, StyleConstants } from ohos/common; import router from ohos.router;Entry Component struct…...

spring MVC概述和土门案例(无配置文件开发)

SpringMVC 1,SpringMVC概述2,SpringMVC入门案例2.1 需求分析2.2 案例制作步骤1:创建Maven项目步骤2:补全目录结构步骤3:导入jar包步骤4:创建配置类步骤5:创建Controller类步骤6:使用配置类替换web.xml步骤7:配置Tomcat环境步骤8:启动运行项目步骤9:浏览器…...

持续集成交付CICD:K8S 通过模板文件自动化完成前端项目应用发布

目录 一、实验 1.环境 2.GitLab 更新deployment文件 3.GitLab更新共享库前端项目CI与CD流水线 4.K8S查看前端项目版本 5.Jenkins 构建前端项目 6.Jenkins 再次构建前端项目 二、问题 1. Jenkins 构建CI 流水线报错 2. Jenkins 构建CI 流水线弹出脚本报错 3. Jenkins…...

【TB作品】51单片机 实物+仿真-电子拔河游戏_亚博 BST-M51

代码工程。 http://dt4.8tupian.net/2/28880a66b12880.pg3这段代码是用于一个数字拔河游戏的嵌入式系统,采用了基于8051架构的单片机,使用Keil C51编译器。 主要功能包括: 数码管显示:使用了四个数码管(通过P2的控制…...

MyBatis ${}和#{}区别

sql防注入底层jdbc类型转换当简单类型参数$不防止Statment不转换value#防止preparedStatement转换任意 除模糊匹配外,杜绝使用${} MyBatis教程,大家可以借鉴 MyBatis 教程_w3cschool 主要区别 1、#{} 是预编译处理,${} 是直接替换&#…...

大型语言模型:RoBERTa — 一种稳健优化的 BERT 方法

slavahead 一、介绍 BERT模型的出现BERT模型带来了NLP的重大进展。 BERT 的架构源自 Transformer,它在各种下游任务上取得了最先进的结果:语言建模、下一句预测、问答、NER标记等。 尽管 BERT 性能出色,研究人员仍在继续尝试其配置&#xff0…...

webpack知识点总结(基础应用篇)

一、为什么需要webpack 1.为什么使用webpack ①传统的书写方式,加载太多脚本会导致网络瓶颈,如不小心改变JavaScript文件加载顺序,项目会崩溃,还会导致作用域问题、js文件太大无法做到按需加载、可读性和可维护性太低的问题。 ②…...

监控k8s controller和scheduler,创建serviceMonitor以及Rules

目录 一、修改kube-controller和kube-schduler的yaml文件 二、创建service、endpoint、serviceMonitor 三、Prometheus验证 四、创建PrometheusRule资源 五、Prometheus验证 直接上干货 一、修改kube-controller和kube-schduler的yaml文件 注意:修改时要一个节…...

支持向量机 支持向量机概述

支持向量机概述 支持向量机 Support Vector MachineSVM ) 是一类按监督学习 ( supervisedlearning)方式对数据进行二元分类的广义线性分类器 (generalized linear classifier) ,其决策边界是对学习样本求解的最大边距超亚面 (maximum-margin hyperplane)与逻辑回归和…...

http -- 跨域问题详解(浏览器)

参考链接 参考链接 1. 跨域报错示例 Access to XMLHttpRequest at http://127.0.0.1:3000/ from origin http://localhost:3000 has been blocked by CORS policy: Response to preflight request doesnt pass access control check: No Access-Control-Allow-Origin header…...

Java对接腾讯多人音视频房间回调接口示例

在前面我们已经对接好了腾讯多人音视频房间相关内容:Java对接腾讯多人音视频房间示例 为了完善业务逻辑,我们还需要对接它的一些回调接口 官方文档地址 主要就下面这些 这里因为比较简单直接上代码 里面有些工具类和上一章一样这里就没贴,需要…...

vp与vs联合开发-通过FrameGrabber连接相机

添加控件 1.CogRecordDisplay 控件 用于显示图像 初始化相机对象方法 //启动窗体时 调用初始化相机方法 //封装相机关闭方法 //窗体关闭时 调用相机关闭方法 拍照 设置采图事件 // 保存图像 设置曝光按钮事件 1.可变参数...

音视频直播核心技术介绍

直播流程 采集: 是视频直播开始的第一个环节,用户可以通过不同的终端采集视频,比如 iOS、Android、Mac、Windows 等。 前处理:主要就是美颜美型技术,以及还有加水印、模糊、去噪、滤镜等图像处理技术等等。 编码&#…...

JNDI注入Log4jFastJson白盒审计不回显处理

目录 0x00 前言 0x01 Maven 仓库及配置 0x02 JNDI 注入简介 0x03 Java-第三方组件-Log4J&JNDI 0x04 Java-第三方组件-FastJson&反射 0x05 白盒审计 - FastJson 0x06 白盒审计 - Log4j 0x07 不回显的处理方法 0x00 前言 希望和各位大佬一起学习,如果…...

FPGA实现腐蚀和膨胀算法verilog设计及仿真 加报告

要在FPGA上实现腐蚀和膨胀算法,你可以按照以下步骤进行: 图像存储:首先,你需要设计一个图像存储器来存储待处理的图像数据。这可以采用FPGA内部存储器或外部存储器。 读取图像数据:使用适当的接口从图像存储器中读取图像数据,并将其加载到FPGA的计算单元中。 结构元素定义…...

核和值域的关系:什么是矩阵的秩?

核和值域的关系:什么是矩阵的秩? 这篇博客将介绍一个任意矩阵的核和值域的关系,并由此说明矩阵秩的意义、子空间维数、子空间正交。 1、矩阵的核:N(A) A ∈ C m n A\in C^{m\times n} A∈Cmn,矩阵的核,记…...

【MyBatis Plus】Service Mapper内置接口讲解

🎉🎉欢迎来到我的CSDN主页!🎉🎉 🏅我是Java方文山,一个在CSDN分享笔记的博主。📚📚 🌟推荐给大家我的专栏《MyBatis-Plus》。🎯🎯 &am…...

制作一个简单 的maven plugin

流程 首先&#xff0c; 你需要创建一个Maven项目&#xff0c;推荐用idea 创建项目 会自动配置插件 pom.xml文件中添加以下配置&#xff1a; <project> <!-- 项目的基本信息 --> <groupId>com.example</groupId> <artifactId>my-maven-plugi…...

基于linux系统的Tomcat+Mysql+Jdk环境搭建(三)centos7 安装Tomcat

Tomcat下载官网&#xff1a; Apache Tomcat - Which Version Do I Want? JDK下载官网&#xff1a; Java Downloads | Oracle 中国 如果不知道Tomcat的哪个版本应该对应哪个版本的JDK可以打开官网&#xff0c;点击Whitch Version 下滑&#xff0c;有低版本的&#xff0c;如…...

Ubuntu环境下SomeIP/CommonAPI环境搭建详细步骤

环境搭建 1.Boost安装 下载Boost源码 &#xff1a; https://www.boost.org/users/download/ 编译安装 首先安装编译所需依赖 sudo apt-get install build-essential g sudo apt-get install installpython-dev autotools-dev sudo apt-get install installlibicu-dev buil…...

eNSP-Cloud(实现本地电脑与eNSP内设备之间通信)

说明&#xff1a; 想象一下&#xff0c;你正在用eNSP搭建一个虚拟的网络世界&#xff0c;里面有虚拟的路由器、交换机、电脑&#xff08;PC&#xff09;等等。这些设备都在你的电脑里面“运行”&#xff0c;它们之间可以互相通信&#xff0c;就像一个封闭的小王国。 但是&#…...

CTF show Web 红包题第六弹

提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框&#xff0c;很难让人不联想到SQL注入&#xff0c;但提示都说了不是SQL注入&#xff0c;所以就不往这方面想了 ​ 先查看一下网页源码&#xff0c;发现一段JavaScript代码&#xff0c;有一个关键类ctfs…...

iPhone密码忘记了办?iPhoneUnlocker,iPhone解锁工具Aiseesoft iPhone Unlocker 高级注册版​分享

平时用 iPhone 的时候&#xff0c;难免会碰到解锁的麻烦事。比如密码忘了、人脸识别 / 指纹识别突然不灵&#xff0c;或者买了二手 iPhone 却被原来的 iCloud 账号锁住&#xff0c;这时候就需要靠谱的解锁工具来帮忙了。Aiseesoft iPhone Unlocker 就是专门解决这些问题的软件&…...

Python实现prophet 理论及参数优化

文章目录 Prophet理论及模型参数介绍Python代码完整实现prophet 添加外部数据进行模型优化 之前初步学习prophet的时候&#xff0c;写过一篇简单实现&#xff0c;后期随着对该模型的深入研究&#xff0c;本次记录涉及到prophet 的公式以及参数调优&#xff0c;从公式可以更直观…...

高危文件识别的常用算法:原理、应用与企业场景

高危文件识别的常用算法&#xff1a;原理、应用与企业场景 高危文件识别旨在检测可能导致安全威胁的文件&#xff0c;如包含恶意代码、敏感数据或欺诈内容的文档&#xff0c;在企业协同办公环境中&#xff08;如Teams、Google Workspace&#xff09;尤为重要。结合大模型技术&…...

python如何将word的doc另存为docx

将 DOCX 文件另存为 DOCX 格式&#xff08;Python 实现&#xff09; 在 Python 中&#xff0c;你可以使用 python-docx 库来操作 Word 文档。不过需要注意的是&#xff0c;.doc 是旧的 Word 格式&#xff0c;而 .docx 是新的基于 XML 的格式。python-docx 只能处理 .docx 格式…...

Android15默认授权浮窗权限

我们经常有那种需求&#xff0c;客户需要定制的apk集成在ROM中&#xff0c;并且默认授予其【显示在其他应用的上层】权限&#xff0c;也就是我们常说的浮窗权限&#xff0c;那么我们就可以通过以下方法在wms、ams等系统服务的systemReady()方法中调用即可实现预置应用默认授权浮…...

云原生安全实战:API网关Kong的鉴权与限流详解

&#x1f525;「炎码工坊」技术弹药已装填&#xff01; 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、基础概念 1. API网关&#xff08;API Gateway&#xff09; API网关是微服务架构中的核心组件&#xff0c;负责统一管理所有API的流量入口。它像一座…...

Rust 开发环境搭建

环境搭建 1、开发工具RustRover 或者vs code 2、Cygwin64 安装 https://cygwin.com/install.html 在工具终端执行&#xff1a; rustup toolchain install stable-x86_64-pc-windows-gnu rustup default stable-x86_64-pc-windows-gnu ​ 2、Hello World fn main() { println…...

加密通信 + 行为分析:运营商行业安全防御体系重构

在数字经济蓬勃发展的时代&#xff0c;运营商作为信息通信网络的核心枢纽&#xff0c;承载着海量用户数据与关键业务传输&#xff0c;其安全防御体系的可靠性直接关乎国家安全、社会稳定与企业发展。随着网络攻击手段的不断升级&#xff0c;传统安全防护体系逐渐暴露出局限性&a…...