【鸿蒙软件开发】ArkTS基础组件之TextClock(时间显示文本)、TextPicker(滑动选择文本)

本文主要是介绍【鸿蒙软件开发】ArkTS基础组件之TextClock(时间显示文本)、TextPicker(滑动选择文本),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

文章目录

  • 前言
  • 一、TextClock
    • 1.1 子组件
    • 1.2 接口
      • 参数
        • TextClockController
    • 1.3 属性
    • 1.4 事件
    • 1.5 示例代码
  • 二、TextPicker
    • 2.1 子组件
    • 2.2 接口
      • 参数
    • 2.3 属性
    • 2.4 事件
    • 2.5 示例代码
  • 总结


前言

TextClock组件:通过文本将当前系统时间显示在设备上。支持不同时区的时间显示,最高精度到秒级。
TextPicker组件:滑动选择文本内容的组件。


一、TextClock

TextClock组件通过文本将当前系统时间显示在设备上。支持不同时区的时间显示,最高精度到秒级。

说明
该组件从API Version 8开始支持。后续版本如有新增内容,会更新博客。

1.1 子组件

1.2 接口

使用下面这个函数,我们即可创建一个TextClock将当前系统时间显示在设备上了。

TextClock(options?: { timeZoneOffset?: number, controller?: TextClockController })

在这里插入图片描述

参数

参数名称:timeZoneOffset 参数类型number 是否必填: 否
参数功能:设置时区偏移量。
取值范围为[-14, 12],表示东十二区到西十二区,其中负值表示东时区,正值表示西时区,比如东八区为-8。
对横跨国际日界线的国家或地区,用-13(UTC+13)和-14(UTC+14)来保证整个国家或者区域处在相同的时间,当设置的值不在取值范围内时,将使用当前系统的时区偏移量。
默认值:当前系统的时区偏移量

参数名:controller 参数类型:TextClockController 是否必填:否
参数功能:绑定一个控制器,用来控制文本时钟的状态。

TextClockController

TextClock容器组件的控制器,可以将该控制器绑定到TextClock组件,通过它控制文本时钟的启动与停止。一个TextClock组件仅支持绑定一个控制器。

导入对象

controller: TextClockController = new TextClockController();

在这里插入图片描述

开启文本时钟
我们可以使用下面的函数启动文本时钟。

start()

停止文本时钟
我们可以使用下面的函数停止文本时钟。

stop()

1.3 属性

属性
除支持通用属性外,还支持以下属性:

参数名称:format 参数类型:string
参数描述:设置显示时间格式。

参数具体使用:
日期间隔符固定为"/“,时间间隔符为”:“。
如yyyyMMdd,yyyy-MM-dd显示为yyyy/MM/dd,
hhmmss显示为hh:mm:ss。
时间格式只用写一位即可,如"hhmmss"等同于"hms”。
支持的时间格式化字符串:

  • YYYY/yyyy:完整年份。
  • YY/yy:年份后两位。
  • M:月份(若想使用01月则使用MM)。
  • d:日期(若想使用01日则使用dd)。
  • D:年中日(一年中的第几天)。
  • H:24小时制。
  • h:12小时制。
  • m:分钟。
  • s:秒。
  • SSS:毫秒。
    若格式未匹配,则使用默认值。
    默认值: ‘hms’

1.4 事件

除支持通用事件外,还支持以下事件:

onDateChange(event: (value: number) => void)	

在这里插入图片描述

提供时间变化回调,该事件最小回调间隔为秒。

  • value: Unix Time Stamp,即自1970年1月1日(UTC)起经过的毫秒数。

1.5 示例代码

@Entry
@Component
struct Second {@State accumulateTime: number = 0// 导入对象controller: TextClockController = new TextClockController()build() {Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {Text('Current milliseconds is ' + this.accumulateTime).fontSize(20)// 以12小时制显示东八区的系统时间,精确到秒。TextClock({ timeZoneOffset: -8, controller: this.controller }).format('hms').onDateChange((value: number) => {this.accumulateTime = value}).margin(20).fontSize(30)Button("start TextClock").margin({ bottom: 10 }).onClick(() => {// 启动文本时钟this.controller.start()})Button("stop TextClock").onClick(() => {// 停止文本时钟this.controller.stop()})}.width('100%').height('100%')}
}

在这里插入图片描述

在这里插入图片描述
我们可以通过按钮开启/关闭TextClock。

二、TextPicker

滑动选择文本内容的组件。

说明
该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

2.1 子组件

2.2 接口

TextPicker(options?: {range: string[]|Resource, selected?: number, value?: string})

在这里插入图片描述

参数

range
参数名: range
参数类型: string[] | Resource
参数描述: 选择器的数据选择列表。
根据range指定的选择范围创建文本选择器。
是否必填:是

selected
参数名: selected
参数类型: number
参数描述: 设置默认选中项在数组中的索引值。
默认值: 0
是否必填:否

value
参数名: value
参数类型: string
参数描述: 设置默认选中项的值,优先级低于selected。
默认值: 第一个元素的值
是否必填:否

2.3 属性

除支持通用属性外,还支持以下属性:

属性名称:defaultPickerItemHeight
属性类型:number | string(例如:1/“1”)
设置Picker各选择项的高度。
在这里插入图片描述

2.4 事件

事件
除支持通用事件外,还支持以下事件:

onAccept(callback: (value: string, index: number) => void)

在这里插入图片描述

点击弹窗中的“确定”按钮时触发该回调。

  • value: 当前选中项的文本。
  • index: 当前选中项的索引值。
    说明:
    该事件仅在文本滑动选择器弹窗中生效。

onCancel(callback: () => void)

在这里插入图片描述

点击弹窗中的“取消”按钮时触发该回调。
说明:
该事件仅在文本滑动选择器弹窗中生效。


onChange(callback: (value: string, index: number) => void)

在这里插入图片描述

滑动选中TextPicker文本内容后,触发该回调。

  • value: 当前选中项的文本。
  • index: 当前选中项的索引值。

2.5 示例代码

// xxx.ets
@Entry
@Component
struct TextPickerExample {private select: number = 1private fruits: string[] = ['apple1', 'orange2', 'peach3', 'grape4']build() {Column() {TextPicker({ range: this.fruits, selected: this.select }).onChange((value: string, index: number) => {console.info('Picker item changed, value: ' + value + ', index: ' + index)})}}
}

在这里插入图片描述


总结

TextClock组件:通过文本将当前系统时间显示在设备上。支持不同时区的时间显示,最高精度到秒级。
TextPicker组件:滑动选择文本内容的组件。

这篇关于【鸿蒙软件开发】ArkTS基础组件之TextClock(时间显示文本)、TextPicker(滑动选择文本)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/299452

相关文章

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件,方便以后开发的时候查找!!! 函数工具: Lodash 页面固定: stickUp、jQuery.Pin 轮播: unslider、swiper 开关: switch 复选框: icheck 气泡: grumble 隐藏元素: Headroom

服务器集群同步时间手记

1.时间服务器配置(必须root用户) (1)检查ntp是否安装 [root@node1 桌面]# rpm -qa|grep ntpntp-4.2.6p5-10.el6.centos.x86_64fontpackages-filesystem-1.41-1.1.el6.noarchntpdate-4.2.6p5-10.el6.centos.x86_64 (2)修改ntp配置文件 [r

如何选择适合孤独症兄妹的学校?

在探索适合孤独症儿童教育的道路上,每一位家长都面临着前所未有的挑战与抉择。当这份责任落在拥有孤独症兄妹的家庭肩上时,选择一所能够同时满足两个孩子特殊需求的学校,更显得尤为关键。本文将探讨如何为这样的家庭做出明智的选择,并介绍星贝育园自闭症儿童寄宿制学校作为一个值得考虑的选项。 理解孤独症儿童的独特性 孤独症,这一复杂的神经发育障碍,影响着儿童的社交互动、沟通能力以及行为模式。对于拥有孤独症兄

第10章 中断和动态时钟显示

第10章 中断和动态时钟显示 从本章开始,按照书籍的划分,第10章开始就进入保护模式(Protected Mode)部分了,感觉从这里开始难度突然就增加了。 书中介绍了为什么有中断(Interrupt)的设计,中断的几种方式:外部硬件中断、内部中断和软中断。通过中断做了一个会走的时钟和屏幕上输入字符的程序。 我自己理解中断的一些作用: 为了更好的利用处理器的性能。协同快速和慢速设备一起工作

OpenHarmony鸿蒙开发( Beta5.0)无感配网详解

1、简介 无感配网是指在设备联网过程中无需输入热点相关账号信息,即可快速实现设备配网,是一种兼顾高效性、可靠性和安全性的配网方式。 2、配网原理 2.1 通信原理 手机和智能设备之间的信息传递,利用特有的NAN协议实现。利用手机和智能设备之间的WiFi 感知订阅、发布能力,实现了数字管家应用和设备之间的发现。在完成设备间的认证和响应后,即可发送相关配网数据。同时还支持与常规Sof

如何在页面调用utility bar并传递参数至lwc组件

1.在app的utility item中添加lwc组件: 2.调用utility bar api的方式有两种: 方法一,通过lwc调用: import {LightningElement,api ,wire } from 'lwc';import { publish, MessageContext } from 'lightning/messageService';import Ca

安卓链接正常显示,ios#符被转义%23导致链接访问404

原因分析: url中含有特殊字符 中文未编码 都有可能导致URL转换失败,所以需要对url编码处理  如下: guard let allowUrl = webUrl.addingPercentEncoding(withAllowedCharacters: .urlQueryAllowed) else {return} 后面发现当url中有#号时,会被误伤转义为%23,导致链接无法访问

C#实战|大乐透选号器[6]:实现实时显示已选择的红蓝球数量

哈喽,你好啊,我是雷工。 关于大乐透选号器在前面已经记录了5篇笔记,这是第6篇; 接下来实现实时显示当前选中红球数量,蓝球数量; 以下为练习笔记。 01 效果演示 当选择和取消选择红球或蓝球时,在对应的位置显示实时已选择的红球、蓝球的数量; 02 标签名称 分别设置Label标签名称为:lblRedCount、lblBlueCount

零基础学习Redis(10) -- zset类型命令使用

zset是有序集合,内部除了存储元素外,还会存储一个score,存储在zset中的元素会按照score的大小升序排列,不同元素的score可以重复,score相同的元素会按照元素的字典序排列。 1. zset常用命令 1.1 zadd  zadd key [NX | XX] [GT | LT]   [CH] [INCR] score member [score member ...]

透彻!驯服大型语言模型(LLMs)的五种方法,及具体方法选择思路

引言 随着时间的发展,大型语言模型不再停留在演示阶段而是逐步面向生产系统的应用,随着人们期望的不断增加,目标也发生了巨大的变化。在短短的几个月的时间里,人们对大模型的认识已经从对其zero-shot能力感到惊讶,转变为考虑改进模型质量、提高模型可用性。 「大语言模型(LLMs)其实就是利用高容量的模型架构(例如Transformer)对海量的、多种多样的数据分布进行建模得到,它包含了大量的先验