0
代码
代码
Issues
Pull Requests
讨论
Wiki
分析
0
Zzhounie补充CountdownViewController接口以及更新README
8a3ba213创建于 20 天前历史提交

CountdownView

本项目基于CountdownView 开发。

简介

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

效果展示

ohos_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 开源协议。