目录

如何在服务卡片上实现分钟级刷新的效果

问题现象

服务卡片配置被动刷新时,如果采用定时刷新,最小刷新时间间隔为30分钟;如果采用定点刷新,最多可设置24个时间。如何在服务卡片中实现分钟级刷新的效果?

背景知识

解决方案

由于卡片被动刷新的次数有限,无法直接在服务卡片上实现分钟级刷新的效果。如果引入TextClock组件后,可通过监听onDateChange回调函数间接实现服务卡片刷新,事件回调间隔为分钟。

示例卡片采用动态时间显示(每分钟刷新并记录日志)和模拟时钟指针旋转(每次刷新旋转30度),同时实时展示刷新次数统计。示例代码如下:

@Entry
@Component
struct DiawidgetCard {
  @State num: number = 0; // 记录刷新次数

  build() {
    Column() {
      Text(`当前刷新次数为:${this.num}`);
      TextClock()
        .onDateChange((value: number) => {
          const unixTimestamp = value;
          const milliseconds = unixTimestamp * 1000; // 转换为毫秒
          const date = new Date(milliseconds);
          // 获取时间各部分
          const year = date.getFullYear(); // 年份
          const month = date.getMonth() + 1; // 月份(0-11→1-12)
          const day = date.getDate(); // 日期
          const hours = date.getHours(); // 小时
          const minutes = date.getMinutes(); // 分钟
          console.info('当前卡片时间更新为', `${year}-${month}-${day} ${hours}:${minutes}`);
          this.num++;
        })
        // 用于控制组件是否展示
        .visibility(Visibility.Visible);
      Stack() {
        Image($r('sys.media.ohos_ic_public_clock')) // 'sys.media.ohos_ic_public_clock'仅作示例,请替换为实际使用的资源
          .width(100)
          .offset({
            x: -1,
            y: 20
          });
        Row()
          .rotate({
            x: 0,
            y: 0,
            z: 1,
            centerX: '0%',
            centerY: '100%',
            angle: this.num * 30
          })
          .width(2).height(40).backgroundColor(Color.Black);
      };
    }
    .width('100%')
    .height('100%');
  }
}

常见FAQ

Q:系统时钟应用可以实现秒级刷新卡片,如何实现类似效果?

A:系统时钟应用使用AnalogClock组件,该组件为系统组件,暂不对三方应用开放。

Q:非系统应用是否可以实现秒级刷新卡片?

A:受卡片系统规格约束,三方应用不支持秒级刷新卡片。对于前期突破该规则的应用,近期将进行整改。

Q:服务卡片应用主动刷新机制是否有刷新次数限制?

A:主动刷新机制目前没有次数限制。