点击下载源码：
https://download.csdn.net/download/liuhaikang/89509449
做一个时间屏幕，可以点击切换白色和黑色，有渐变效果，使用到了鸿蒙的动画效果。
在这个设计中，我们首先引入了通用能力包，以实现功能齐全且界面友好的时间页面。通过引入AppUtil和DateUtil工具包，我们可以轻松处理应用程序的布局和时间格式化需求。
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);}通过这个设计，我们不仅实现了优雅的时间页面展示，而且在交互和用户体验方面也有了重要考量。
