CountdownView

本项目基于CountdownView 开发。

简介

支持多种样式和动态配置的倒计时控件，适用于多种场景，如倒计时、计时器。

效果展示

下载安装

 ohpm install @ohos/countdownview

OpenHarmony ohpm 环境配置等更多内容，请参考如何安装 OpenHarmony ohpm 包。

约束与限制

兼容性

在下述版本验证通过：

• DevEco Studio: DevEco Studio 6.0.2 Release(6.0.2.642), SDK: API22(6.0.2.130);
• DevEco Studio: NEXT Developer Beta1(5.0.3.122), SDK: API12(5.0.0.18);
• suffixPosition参数从API 20开始支持，API 20以下版本默认居中显示；

权限要求

无

使用示例

完整示例

import { CountdownView, CountdownViewController } from '@ohos/countdownview';
import { systemDateTime } from '@kit.BasicServicesKit';

@Entry
@Component
struct Index {
  controller: CountdownViewController = new CountdownViewController()

  build() {
    Column() {
      // 倒计时
      CountdownView({
        endTime: systemDateTime.getTime() + 1000 * 60 * 60 * 5,
        isShowDay: false,
        suffixFontColor: '#000000',
        suffixFontSize: 20,
        timeFontColor: '#FFFFFF',
        timeBgColor: '#FF5000',
        timeFontSize: 20,
        timePadding: 3,
        timeWidth: 30,
        timeHeight: 30,
        suffixHourPadding: 5,
        suffixMinutePadding: 5,
        suffixSecondPadding: 5,
        isHideTimeBackground: false
      })

      // 计时器
      CountdownView({
        startTime: systemDateTime.getTime(),
        isCountDown: false,
        isShowDay: true,
        isShowHour: true,
        isShowMillisecond: false,
        isShowMinute: true,
        isShowSecond: true,
        isTimeFontWeight: false,
        timeFontSize: 24,
        timeFontColor: '#000000',
        timeHeight: 24,
        suffixFontColor: '#000000',
        suffixFontSize: 12,
        suffixDay: '天',
        suffixHour: '小时',
        suffixMinute: '分钟',
        suffixSecond: '秒',
        suffixMillisecond: '毫秒'
      })

      // controller使用
      CountdownView({
        controller: this.controller,
        endTime: systemDateTime.getTime() + 1000 * 60 * 60 * 24 * 8,
        isShowDay: true,
        isShowMillisecond: true,
        suffixFontColor: '#000000',
        suffixFontSize: 20,
        timeBgColor: '#FF5000',
        timeFontColor: '#ffe7c10b',
        timeFontSize: 20,
        timePadding: 3,
        timeWidth: 30,
        timeHeight: 30,
        suffixDayPadding: 5,
        suffixHourPadding: 5,
        suffixMinutePadding: 5,
        suffixSecondPadding: 5
      })

      Button('获取所有时间值').onClick(() => {
        const day = this.controller.getDay()
        const hour = this.controller.getHour()
        const minute = this.controller.getMinute()
        const second = this.controller.getSecond()
        const remainTime = this.controller.getRemainTime()
      })

      Button('更新时间').onClick(() => {
        this.controller.updateShow(1000 * 60 * 3)
      })

      Button('置0').onClick(() => {
        this.controller.allShowZero()
      })

      Button('暂停倒计时').onClick(() => {
        this.controller.pause()
      })

      Button('恢复倒计时').onClick(() => {
        this.controller.restart()
      })
    }
    .height('100%')
    .width('100%')
  }
}

注意事项

无

使用说明

1. 在相应的文件中引入组件

import { CountdownView } from '@ohos/countdownview';

2. 在使用到的地方创建组件

CountdownView({
  endTime: systemDateTime.getTime() + 1000 * 60 * 60 * 5,
  isShowDay: false,
  suffixFontColor: '#000000',
  suffixFontSize: 20,
  timeFontColor: '#FFFFFF',
  timeBgColor: '#FF5000',
  timeFontSize: 20,
  timePadding: 3,
  timeWidth: 30,
  timeHeight: 30,
  suffixHourPadding: 5,
  suffixMinutePadding: 5,
  suffixSecondPadding: 5,
})

接口说明

接口

CountdownView

接口名	类型	默认值	说明
startTime	number	0	计时开始时间
endTime	number	0	倒计时结束时间
started	boolean	true	是否开始倒计时
controller	CountdownViewController | undefined	undefined	时间控制器
isHideTimeBackground	boolean	true	是否隐藏容器背景颜色
ContainerBgColor	ResourceColor | undefined	undefined	容器背景颜色
ContainerBgWidth	number | string	1000	容器背景宽度
ContainerBgHeight	number | string | undefined	undefined	容器背景高度
timeFontColor	ResourceColor	Color.Black	时间字体颜色
timeBgColor	ResourceColor	'#FFFFFF'	时间背景颜色
timeBgBorderRadius	number	0	时间背景边框圆角
timeBgBorderColor	ResourceColor	Color.Transparent	时间背景边框颜色
timeBgBorderWidth	number	0	时间背景边框宽度
timeFontSize	number | string | Resource	14	时间字体大小
timeWidth	number | undefined | string	undefined	时间字体宽度
timeHeight	number | undefined | string	undefined	时间字体高度
timePadding	number | undefined	undefined	时间字体内边距
suffixText	string | Resource	":"	分隔符文本
suffixHour	string | undefined	undefined	时分隔符
suffixHourPadding	number | undefined | Padding	undefined	时分隔符字体内边距
suffixMinute	string | undefined	undefined	分钟分隔符
suffixMinutePadding	number | undefined | Padding	undefined	分钟分隔符字体内边距
suffixSecond	string | undefined	undefined	秒分隔符
suffixSecondPadding	number | undefined | Padding	undefined	秒分隔符字体内边距
suffixMillisecond	string | undefined	undefined	毫秒分隔符
suffixMillisecondPadding	number | undefined | Padding	undefined	毫秒分隔符字体内边距
suffixFontColor	ResourceColor	Color.Black	分隔符颜色
suffixFontSize	number | string | Resource	14	分隔符字体大小
suffixWidth	number | undefined | string	undefined	分隔符字体宽度
suffixPosition	TextVerticalAlign | undefined	TextVerticalAlign.CENTER	分隔符垂直方向显示位置（BOTTOM:底部，CENTER:居中，TOP:顶部） 说明： isSuffixTextPosition设置为true开启调节，该接口从API 20开始支持。
suffixDay	string | undefined	undefined	天分隔符
suffixDayPadding	number | undefined | Padding	undefined	天分隔符字体内边距
dividerWidth	number	0.5	分割线宽度
dividerColor	ResourceColor	'#30FFFFFF'	分割线颜色
isCountDown	boolean	true	是否开启倒计时（true:倒计时，false:计时）
isShowDay	boolean	true	是否显示天
isShowHour	boolean	true	是否显示小时
isShowMinute	boolean	true	是否显示分钟
isShowSecond	boolean	true	是否显示秒
isShowMillisecond	boolean	false	是否显示毫秒
isShowDivider	boolean	false	是否显示时间分割线
isShowBorder	boolean	false	是否显示时间边框
isTimeFontWeight	boolean	false	是否时间加粗
isSuffixTextFontWeight	boolean	false	是否分隔符加粗
isSuffixTextPosition	boolean	false	是否开启分隔符位置调节
isConvertDaysToHours	boolean	false	是否天转化为小时
dayModifier	TextModifier | undefined	undefined	自定义天样式
daySuffixModifier	TextModifier | undefined	undefined	自定义日分隔符样式
hourModifier	TextModifier | undefined	undefined	自定义时样式
hourSuffixModifier	TextModifier | undefined	undefined	自定义时分隔符样式
minuteModifier	TextModifier | undefined	undefined	自定义分钟样式
minuteSuffixModifier	TextModifier | undefined	undefined	自定义分分隔符样式
secondModifier	TextModifier | undefined	undefined	自定义秒样式
secondSuffixModifier	TextModifier | undefined	undefined	自定义秒分隔符样式
millisecondModifier	TextModifier | undefined	undefined	自定义毫秒样式
millisecondSuffixModifier	TextModifier | undefined	undefined	自定义毫秒分隔符样式
timeBorderWidth	number | undefined	undefined	时间边框宽度
timeBorderRadius	number	0	时间边框圆角
intervalTime	number	1000	间隔触发回调的时间间隔，单位为毫秒
onEnd	() => void	-	倒计时结束回调
onInterval	(remainTime: number) => void	-	倒计时每隔指定时间就会触发一次，remainTime 为剩余毫秒数

CountdownViewController

名称	方法	说明	HarmonyOS 平台支持
getDay	getDay(): number	获取剩余天数	是
getHour	getHour(): number	获取剩余小时数	是
getMinute	getMinute(): number	获取剩余分钟数	是
getSecond	getSecond(): number	获取剩余秒数	是
getRemainTime	getRemainTime(): number	获取剩余毫秒数	是
allShowZero	allShowZero(): void	将所有时间单位置为0并停止计时	是
updateShow	updateShow(ms: number): void	更新倒计时的剩余毫秒数并重新开始计时	是
pause	pause(): void	暂停当前倒计时	是
restart	restart(): void	恢复已暂停的倒计时	是

关于混淆

• 代码混淆，请查看代码混淆简介。
• 如果希望CountdownView库在代码混淆过程中不会被混淆，需要在混淆规则配置文件obfuscation-rules.txt中添加相应的排除规则。

-keep
./oh_modules/@ohos/countdownview

目录结构

│-----ohos_countdownview
│        ├─library       # 组件模块
│        │  └─src
│        │      ├─main
│        │         └─ets          
│        │            └─components
│        │                └─CountdownView.ets     # 倒计时实现
│        ├─entry         #示例应用模块
│        ├─README.md         #安装使用方法
│        ├─README_zh.md      #安装使用方法

贡献代码

使用过程中发现任何问题都可以提交 Issue ,当然，也非常欢迎提交 PR.

开源协议

本项目采用 MIT License 开源协议。