HarmonyOS实战——Clock组件的基本使用

简介: HarmonyOS实战——Clock组件的基本使用
  • 显示类组件:时钟、定时器、进度条

1. Clock时钟组件的基本使用

  • 组件说明:Text的子类,所以可以使用Text的一些属性。
  • 常用属性:

在这里插入图片描述

  • 常见方法:

在这里插入图片描述

基本用法:

  1. xml 文件布局:
    <Clock
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text_size="30fp"
    />
AI 代码解读
  • 默认把当前时间作为一个展示,而且时间是不断走动的

在这里插入图片描述

  • ohos:time_zone="GMT"是默认值
  • 24小时的格式
    <Clock
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:time_zone="GMT"
        ohos:mode_24_hour="yyyy年MM月dd日 HH:mm:ss"
        ohos:text_size="30fp"
    />
AI 代码解读

在这里插入图片描述

  • 12小时的格式,Clock 组件默认是24小时制的,所以得把默认24小时制的关掉,用下面的12小时展示
  • a 表示的是上午或下午
    <Clock
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:time_zone="GMT"
        ohos:mode_24_hour="false"
        ohos:mode_12_hour="yyyy年MM月dd日 hh:mm:ss a"
        ohos:text_size="30fp"   
    />
AI 代码解读
  • 运行后,发现出现了bug

在这里插入图片描述

  • 因为 Clock 组件是华为刚推出的,如果用 xml 直接指定他的属性,会出现一些小bug,不过24小时是没问题,如果使用属性的方式指定12小时计算方式,就会出现如上bug,下面就可以使用Java代码的形式来实现12小时的展示。
  1. Java 代码实现:
  • 实现12小时制如下,a 表示的是上午或下午

在这里插入图片描述
ability_main
在这里插入图片描述

MainAbilitySlice
在这里插入图片描述

    //1.找到时钟组件
    Clock clock = (Clock) findComponentById(ResourceTable.Id_clock);
    
    //2.修改时钟组件展开的方式
    //默认是24小时
    //如果要按照12小时进行展示,需要先把24小时展示给关闭
    clock.set24HourModeEnabled(false);
    
    //3.指定12小时的展示格式
    clock.setFormatIn12HourMode("yyyy年MM月dd日 hh:mm:ss a");
AI 代码解读
  • 运行:

在这里插入图片描述

  • 发现没有任何问题

2. Clock时钟案例——24小时制和12小时制之间的转换

  • 点击按钮后,上面的24小时制的时间就会变成12小时制,再次点击后,上面的展示格式就会变成24小时制

在这里插入图片描述

需求:

  1. 通过点击按钮,将时钟组件中的显示方式在24小时制和12小时制之间切换

业务分析:

  1. 页面上有时钟组件和一个按钮组件
  2. 时钟组件默认是按照24小时制显示时间
  3. 点击按钮可以切换到12小时制显示时间
  4. 再次点击按钮可以切换到24小时制显示时间

布局分析:

  • 布局中文本比较多,所以可以使用换行属性:ohos:multiple_lines="true",这个属性也是Text组件的属性,Clock组件也是Text住组件的子类,所以可以直接拿过来使用

在这里插入图片描述
ability_main

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="vertical">

    <Clock
        ohos:id="$+id:clock"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:multiple_lines="true"
        ohos:text_size="35fp"
        ohos:text_alignment="center"
        ohos:mode_24_hour="yyyy年MM月dd日 HH:mm:ss"
        ohos:layout_alignment="center"
        />

    <Button
        ohos:id="$+id:but"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text="改为12小时制"
        ohos:text_size="40fp"
        ohos:background_element="#92D050"
        ohos:top_margin="30vp"
        ohos:layout_alignment="center"
        />

</DirectionalLayout>
AI 代码解读
  • 点击按钮时,按钮里面的文本内容也要发生相应的变化,点击按钮后上面的时间制和按钮里的文本是相反的,如:默认是24小时制,点击的按钮文本内容是“改为12小时制”。时间改为12小时制后,按钮里面的文本就会变成“改为24小时制”
  • 相当于24小时制和12小时制的时间来回做个切换
  • 因为代码中要用到 clock 对象,所以得把他放到成员位置
  • 把上面Java实现展示12小时制的代码可以拿过来复用

在这里插入图片描述
在这里插入图片描述

  • 运行:

在这里插入图片描述

  • 点击按钮后:

在这里插入图片描述

  • 还有个问题就是:再次点击按钮后,上面的12小时制要变回24小时制,按钮里的内容也要变为“改为24小组制
  • onClick 方法当中要做两种方式的判断,在方法外做一个标记,类型可以使用booleanint类型,boolean类型有两个值,只能表示两个状态,为了后期的扩展,这里使用 int 类型来做标记

在这里插入图片描述

  • 这个时候需要在 onClick 方法中使用 but 来改变按钮上的文本内容,所以把 but 提为成员变量

在这里插入图片描述

  • 当点击了按钮执行 onClick 方法的时候,在方法中进行判断两者的状态就行了

在这里插入图片描述

  • 在24小时制中,小时用 H 来表示,而且不用 a

在这里插入图片描述

MainAbilitySlice

package com.xdr630.clockapplication.slice;

import com.xdr630.clockapplication.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Button;
import ohos.agp.components.Clock;
import ohos.agp.components.Component;

public class MainAbilitySlice extends AbilitySlice implements Component.ClickedListener {

    Clock clock;
    Button but;

    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);

        //1.找到时钟组件

        clock = (Clock) findComponentById(ResourceTable.Id_clock);
        //找到按钮组件
        but = (Button) findComponentById(ResourceTable.Id_but);

        //2.给按钮添加一个单击事件
        but.setClickedListener(this);



    }

    @Override
    public void onActive() {
        super.onActive();
    }

    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }

    //如果为 0,表示24小时制
    //如果为 1,表示12小时制
    int flag = 0;

    @Override
    public void onClick(Component component) {

        if (flag == 0){
            //表示当前为24小时制
            //如果当前为24小时制,则修改为12小时制
            //默认是24小时
            //如果要按照12小时进行展示,需要先把24小时展示给关闭
            clock.set24HourModeEnabled(false);

            //3.指定12小时的展示格式
            clock.setFormatIn12HourMode("yyyy年MM月dd日 hh:mm:ss a");
            //修改按钮上的文字
            but.setText("改为24小时制");
            //修改标记对应的状态
            flag = 1;

        }else if (flag == 1){
            //当前是12小时制,要改为24小时制
            clock.set24HourModeEnabled(true);
            //修改展示格式
            clock.setFormatIn24HourMode("yyyy年MM月dd日 HH:mm:ss");
            //修改按钮上的文字
            but.setText("改为12小时制");
            //修改标记
            flag = 0;
        }


    }
}
AI 代码解读
  • 运行:

在这里插入图片描述

  • 点击按钮“改为12小时制”

在这里插入图片描述

  • 再次点击按钮“改为24小时制”

在这里插入图片描述

3. Clock组件扩展——指定开始运行的时间点

  • 在以后大多数用到的时间都是系统当前的时间,个别的情况是展示指定的时间
  • 在 xml 文件加上属性time,把属性值(毫秒值或时间戳)加在后面就行了

0:表示时间从时间原点 1970-01-01 08:00:00 开始计算的,标准是1970-01-01 00:00:00,中国普遍使用东八区的时间,东八区的标准时间是比世界协调时间(UTC)/格林尼治时间(GMT)快8小时,跟标准时间是有8个小时的时差
在这里插入图片描述

  • 运行:

在这里插入图片描述

把时间设置为指定的时间

  • 百度:时间戳

在这里插入图片描述

  • 时间戳:从时间原点开始到指定的时间,在这个过程当中一共经历了多少毫秒
  • 把刚刚转换的时间戳复制到 time 属性那里

在这里插入图片描述

  • 运行后,就是从自己指定的时间开始的

在这里插入图片描述

目录
打赏
0
0
0
0
169
分享
相关文章
基于HarmonyOS 5.0 (Next)技术的渐变模糊效果技术实现【代码实战】
本文详细介绍如何在HarmonyOS 5.0(Next)中实现渐变模糊效果,涵盖从基础页面搭建到添加模糊、渐变效果的全过程,并通过代码实战展示具体操作步骤。文章首先介绍了使用`Stack`和`Image`控件设置背景并应用`foregroundBlurStyle`属性实现模糊效果,接着通过`linearGradient`属性融入渐变效果,使界面更加精致美观。此外,还展示了如何利用滑动条和手势等交互元素动态调整模糊与渐变效果,增强用户体验。最后,通过具体代码示例说明如何为图片、弹窗等控件添加渐变模糊效果,突显HarmonyOS的强大功能与灵活性。
112 17
鸿蒙开发:一文探究Navigation路由组件
如果你还在使用router做为页面跳转,建议切换Navigation组件作为应用路由框架,不为别的,因为官方目前针对router已不在推荐。
169 101
鸿蒙开发:一文探究Navigation路由组件
鸿蒙HarmonyOS应用开发 | 探索 HarmonyOS Next-从开发到实战掌握 HarmonyOS Next 的分布式能力
HarmonyOS Next 是华为新一代操作系统,专注于分布式技术的深度应用与生态融合。本文通过技术特点、应用场景及实战案例,全面解析其核心技术架构与开发流程。重点介绍分布式软总线2.0、数据管理、任务调度等升级特性,并提供基于 ArkTS 的原生开发支持。通过开发跨设备协同音乐播放应用,展示分布式能力的实际应用,涵盖项目配置、主界面设计、分布式服务实现及部署调试步骤。此外,深入分析分布式数据同步原理、任务调度优化及常见问题解决方案,帮助开发者掌握 HarmonyOS Next 的核心技术和实战技巧。
252 76
鸿蒙HarmonyOS应用开发 | 探索 HarmonyOS Next-从开发到实战掌握 HarmonyOS Next 的分布式能力
基于HarmonyOS 5.0(NEXT)与SpringCloud架构的跨平台应用开发与服务集成研究【实战】
本次的.HarmonyOS Next ,ArkTS语言,HarmonyOS的元服务和DevEco Studio 开发工具,为开发者提供了构建现代化、轻量化、高性能应用的便捷方式。这些技术和工具将帮助开发者更好地适应未来的智能设备和服务提供方式。
74 8
基于HarmonyOS 5.0(NEXT)与SpringCloud架构的跨平台应用开发与服务集成研究【实战】
HarmonyOS 5.0 (Next)应用开发实战:使用ArkTS构建开箱即用的登录页面【HarmonyOS 5.0(Next)】
### HarmonyOS 5.0(Next)应用开发实战:使用ArkTS构建开箱即用的登录页面 HarmonyOS 5.0(Next)融合了美学与科技,引入“光感美学”设计理念和多设备深度协同功能。本文通过 ArkTS 构建一个简单的登录页面,展示了模块化导入、状态管理、方法封装、声明式UI构建及事件处理等最佳实践。代码实现了一个包含用户名和密码输入框及登录按钮的界面,支持错误提示和页面跳转。
174 14
HarmonyOS 5.0 (Next)应用开发实战:使用ArkTS构建开箱即用的登录页面【HarmonyOS 5.0(Next)】
|
2月前
鸿蒙开发:组件样式的复用
如果要实现多页面之间的组件属性样式复用,建议使用AttributeModifier,如果是单页面,通用属性可以使用@Styles,组件自有属性可以使用@Extend。
鸿蒙开发:组件样式的复用
鸿蒙登录页面好看的样式设计-HarmonyOS应用开发实战与ArkTS代码解析【HarmonyOS 5.0(Next)】
鸿蒙登录页面设计展示了 HarmonyOS 5.0(Next)的未来美学理念,结合科技与艺术,为用户带来视觉盛宴。该页面使用 ArkTS 开发,支持个性化定制和无缝智能设备连接。代码解析涵盖了声明式 UI、状态管理、事件处理及路由导航等关键概念,帮助开发者快速上手 HarmonyOS 应用开发。通过这段代码,开发者可以了解如何构建交互式界面并实现跨设备协同工作,推动智能生态的发展。
194 10
鸿蒙登录页面好看的样式设计-HarmonyOS应用开发实战与ArkTS代码解析【HarmonyOS 5.0(Next)】
鸿蒙Flutter实战:14-现有Flutter 项目支持鸿蒙 II
本文介绍了如何将现有 Flutter 项目适配鸿蒙系统,详细步骤包括安装 FVM、使用 FVM 安装 Flutter SDK、搭建开发环境、创建项目架构和壳工程等。
291 4
鸿蒙Flutter实战:14-现有Flutter 项目支持鸿蒙 II
|
2月前
|
【HarmonyOS Next开发】日历组件详细日界面组件
原生UI没有提供日历相关的组件,于是手撸了详细页面的日程。一开始打算使用list加tab的方式来实现切换的效果,但是list的切换是没有办法确定当前展示的索引的,所以没有办法实现日历内容动态添加等效果。在业内大佬的指导下,使用了两个swiper组件分别实现周和日的切换,实现了想要的效果
77 6
鸿蒙应用开发从入门到入行 - 篇4:层叠布局、自定义组件、ForEach
导读:在本篇文章里,您将掌握层叠布局、自定义组件的用法,特别是自定义组件将来的开发中必然会用,其中应该特别关注自定义组件的一些规范与装饰器。
65 7
鸿蒙应用开发从入门到入行 - 篇4:层叠布局、自定义组件、ForEach

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等