鸿蒙应用开发-时间屏幕

news2024/10/6 1:35:06

点击下载源码:

https://download.csdn.net/download/liuhaikang/89509449

做一个时间屏幕,可以点击切换白色和黑色,有渐变效果,使用到了鸿蒙的动画效果。

在这个设计中,我们首先引入了通用能力包,以实现功能齐全且界面友好的时间页面。通过引入AppUtilDateUtil工具包,我们可以轻松处理应用程序的布局和时间格式化需求。

import { common } from '@kit.AbilityKit';
import { window } from '@kit.ArkUI';
import { AppUtil } from './Utils/AppUtil';
import { DateUtil } from './Utils/DateUtil';

页面设计与交互

这个时间页面设计结构采用了组件化的方式,通过Column()Text()等函数构建出页面的主体结构。同时,页面具有可交互性,用户可以通过点击动作改变字体颜色和背景色的设置。

@Entry
@Component
struct TimePage {
  // 页面初始化与逻辑控制
  // ...

  build() {
    // 构建页面主体
    Column() {
      Text(this.timeText)
        .fontSize(this.bigFontSize)
        .fontColor(this.fontColor)
        .animation({ duration: 2000, curve: Curve.EaseOut, iterations: 1, playMode: PlayMode.Normal });

      Text(this.dateText)
        .fontSize(this.smallFontSize)
        .fontColor(this.fontColor)
        .animation({ duration: 2000, curve: Curve.Ease, iterations: 1, playMode: PlayMode.Normal });
    }
    // 页面交互设计
    .onClick(() => {
      // 点击切换颜色
      if (this.flag) {
        this.fontColor = TimePage.whiteColor;
        this.bgColor = TimePage.blackColor;
      } else {
        this.fontColor = TimePage.blackColor;
        this.bgColor = TimePage.whiteColor;
      }
      this.flag = !this.flag;
    })
    // 设置背景色、动画效果等
    .backgroundColor(this.bgColor)
    .animation({ duration: 2000, curve: Curve.Ease, iterations: 1, playMode: PlayMode.Normal })
    .justifyContent(FlexAlign.Center)
    .width('100%')
    .height('100%')
  }
}

页面优化与用户体验

除了页面设计外,我们还在页面显示时做了一些优化工作,例如设置了横屏显示,同时在页面切换或离开时清除定时器,避免资源浪费。

  onPageShow(): void {
    AppUtil.setPreferredOrientation(window.Orientation.LANDSCAPE_INVERTED);
  }

  aboutToDisappear(): void {
    clearInterval(this.intervalID);
  }

通过这个设计,我们不仅实现了优雅的时间页面展示,而且在交互和用户体验方面也有了重要考量。 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1887863.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

uniapp做小程序内打开地图展示位置信息

使用场景&#xff1a;项目中需要通过位置信息打开地图查看当前位置信息在地图那个位置&#xff0c;每个酒店有自己的经纬度和详细地址&#xff0c;点击地图按钮打开内置地图如图 方法如下&#xff1a; <view class"dttu" click"openMap(info.locationY,info.…

24/07/02数据结构(1.1201)算法效率顺序表

数据结构基本内容:1.时间复杂度 空间复杂度2.顺序表链表3.栈 队列4.二叉树5.排序 数据结构是存储,组织数据的方式.指相互之间存在一种或多种特定关系的数据元素的集合 算法是定义良好的计算过程.取一个或一组值为输入并产生一个或一组值为输出. 需要知道虽然选择题有20-30个…

什么是Java泛型擦除?

JDK1.5之后引入泛型擦除的概念。 目录 验证逻辑 实际编译后的结果&#xff1a; 验证例子&#xff1a; 两个类型相同&#xff0c;表面泛型都被擦出了&#xff0c;都是Arraylist。 List<String> list1 new Arraylist<>(); List<Integer> list2 new Arrayli…

自动化一些操作

下拉选择框 from selenium import webdriver from time import sleep # 导包 from selenium.webdriver.support.select import Select driver webdriver.Edge() driver.get(r"D:\WORK\ww\web自动化_day01_课件笔记资料代码\web自动化_day01_课件笔记资料代码\02_其他资料…

配置windows环境下独立浏览器爬虫方案【不依赖系统环境与chrome】

引言 由于部署浏览器爬虫的机器浏览器版本不同&#xff0c;同时也不想因为部署了爬虫导致影响系统浏览器数据&#xff0c;以及避免爬虫过程中遇到的chrome与webdriver版本冲突。我决定将特定版本的chrome浏览器与webdriver下载到项目目录内&#xff0c;同时chrome_driver在初始…

【车载开发系列】SPI总线通信技术

【车载开发系列】SPI总线通信技术 【车载开发系列】SPI总线通信技术 【车载开发系列】SPI总线通信技术一. 什么是SPI二. 应用范围三. 协议特点1&#xff09;传输速率2&#xff09;主要功能3&#xff09;拓扑结构4&#xff09;接口配置 四. SPI总线原理五. 信号列表六. SPI传输时…

攻防世界-WEB-catcat-new

前言 .................. 开干 正文 信息收集 有意思 估计是权限不够导致无法访问 我们点击几只小猫看看有什么东西 好的,?File 试试看是否存在任意文件读取 思路 成功,接下来我们尝试获取历史记录 这里补充一下知识点 /proc/self proc是一个伪文件系统&#xff0c;它提…

PDF文档如何统计字数,统计PDF文档字数的方法有哪些?

在平时使用pdf阅读或者是处理文档的时候&#xff0c;常常需要统计文档的字数。pdf在查看文字时其实很简单。 PDF文档是一种常见的电子文档格式&#xff0c;如果需要对PDF文档中的字数进行统计&#xff0c;可以使用以下方法&#xff1a; Adobe Acrobat DC&#xff1a;Adobe Ac…

Linux 防火墙开放端口

启动防火墙服务&#xff1a;systemctl start firewalld 查看防火墙开放端口 &#xff1a;firewall-cmd --list-ports 开放3306端口&#xff1a;firewall-cmd --zonepublic --add-port2375/tcp --permanent 防火墙重启&#xff1a;firewall-cmd --reload

html+css+js气球消除小游戏

气球消除小游戏 消除15个就成功 源码在图片后 点赞加关注&#xff0c;谢谢 左上角的数字显示消除气球的数量 定时随机生成气球 &#x1f388;&#x1f388;&#x1f388; 图片 源代码 <!DOCTYPE html> <html lang"en"> <head> <meta charset&…

2.3.2 主程序和外部IO交互 (文件映射方式)----IO Client实现

2.3.2 主程序和外部IO交互 &#xff08;文件映射方式&#xff09;----IO Client C实现 和IOServer主要差别&#xff1a; 1 使用Open_Client 连接 2 一定要先打开IOServer&#xff0c;再打开IO_Client 效果显示 1 C 代码实现 1.1 shareddataClient.h 头文件中引用 和sharedd…

0 TMS320F28379D 开坑

开坑原因 最近开始做实验&#xff0c;实验室的主控采用的是F2812FPGA&#xff0c;属于够用但不好用的状态。FPGA用于生成调制信号&#xff0c;DSP完成采样和控制。师兄师姐研究拓扑及调制策略&#xff0c;对驱动数量以及驱动逻辑有比较高的要求&#xff0c;因此不好脱离FPGA&a…

机器学习原理之 -- 支持向量机分类:由来及原理详解

支持向量机&#xff08;Support Vector Machine, SVM&#xff09;是统计学习理论的一个重要成果&#xff0c;广泛应用于分类和回归问题。SVM以其高效的分类性能和良好的泛化能力在机器学习领域中占据重要地位。本文将详细介绍支持向量机的由来、基本原理、构建过程及其优缺点。…

【Excel操作】Python Pandas判断Excel单元格中数值是否为空

判断Excel单元格中数值是为空&#xff0c;主要有下面两种方法&#xff1a; 1. pandas.isnull 2. pandas.isna判断Excel不为空&#xff0c;也有下面两种方法&#xff1a; 1. pandas.notna 2. pandas.notnull假设有这样一张Excel的表格 我们来识别出为空的单元格 import panda…

基于Hadoop平台的电信客服数据的处理与分析①项目准备阶段---项目技术预研(技术架构)

任务描述 掌握项目的总体功能&#xff0c;及实现流程。预习项目中所使用到的技术和知识点。 任务指导 一、项目效果展示 二、项目架构 1、总体架构&#xff1a; 2、技术架构 技术清单&#xff1a; 功能 组件 说明 消息中间件Kafka消息队列数据采集Flume日志采集工具存储…

js获取当前浏览器地址,ip,端口号等等

前言&#xff1a; js获取当前浏览器地址&#xff0c;ip&#xff0c;端口号等等 window.location属性查询 具体属性&#xff1a; 1、获取他的ip地址 window.location.hostname 2、获取他的端口号 window.location.port 3、获取他的全路径 window.location.origin 4、获取…

机器学习 C++ 的opencv实现SVM图像二分类的测试 (三)【附源码】

机器学习 C 的opencv实现SVM图像二分类的测试 (三) 数据集合下载地址&#xff1a;https://download.csdn.net/download/hgaohr1021/89506900 根据上节得到的svm.xml&#xff0c;测试结果为&#xff1a; #include <stdio.h> #include <time.h> #include <o…

25.labview数据采集中的读取和写入文本文件和Excel表格文件

①本文将会讲解labview读取和写入文本文件和Excel文件的几种不同方式&#xff0c;讲解程序的基本原理&#xff0c;并提出具体的实施方案&#xff0c;本文内容如下所示。 ②本文文章结束会提供大家 文本和表格读取写入的源程序 &#xff0c;以便于大家学习和使用。 本文中可能用…

商城小程序论文(设计)开题报告

一、课题的背景和意义 近些年来&#xff0c;随着移动互联网巅峰时期的来临&#xff0c;互联网产业逐渐趋于“小、轻、微”的方向发展&#xff0c;符合轻应用时代特点的各类技术受到了不同领域的广泛关注。在诸多产品中&#xff0c;被誉为“运行着程序的网站”之名的微信小程序…

HUAWEI MPLS 静态配置和动态LDP配置

MPLS(Multi-Protocol Label Switching&#xff0c;多协议标签交换技术)技术的出现&#xff0c;极大地推动了互联网的发展和应用。例如&#xff1a;利用MPLS技术&#xff0c;可以有效而灵活地部署VPN(Virtual Private Network&#xff0c;虚拟专用网)&#xff0c;TE(Traffic Eng…