时间标签视图#

Scripting 提供了一组便捷的时间标签组件，封装了 SwiftUI 中 Text 的时间样式。这些组件支持在小组件和视图中显示实时更新的日期与时间格式，适用于加载动态数据、显示相对时间、计时器等多种应用场景。

DateLabel#

用于以不同格式展示一个时间戳。即使组件未运行，也可在小组件中显示持续更新的时间相关信息。

属性定义#

1type DateLabelProps = {
2  timestamp: number
3  style: 'date' | 'time' | 'timer' | 'relative' | 'offset'
4}

• timestamp: 要显示的时间点，单位为毫秒（UNIX 时间戳）。

• style: 显示样式，可选值包括:

  • "date": 以日期形式显示，例如 "June 3, 2019"
  • "time": 仅显示时间，例如 "11:23PM"
  • "timer": 以计时器形式实时更新，例如 "2:32"、"36:59:01"
  • "relative": 以相对当前时间的形式显示，例如 "2 hours, 23 minutes"
  • "offset": 显示相对当前时间的偏移，例如 +2 hours、-3 months

示例#

1<DateLabel
2  timestamp={Date.now()}
3  style="date"
4/>
5
6<DateLabel
7  timestamp={Date.now()}
8  style="relative"
9/>

DateRangeLabel#

用于显示两个时间点之间的本地化时间范围。

属性定义#

1type DateRangeLabelProps = {
2  from: number
3  to: number
4}

示例#

1<DateRangeLabel
2  from={Date.now()}
3  to={Date.now() + 1000 * 60}
4/>

DateIntervalLabel#

用于显示两个时间点之间的时间区间，常用于表示日程或事件的开始与结束时间。

属性定义#

1type DateIntervalLabelProps = {
2  from: number
3  to: number
4}

示例#

1let fromDate = new Date()
2fromDate.setHours(9)
3fromDate.setMinutes(30)
4
5let toDate = new Date()
6toDate.setHours(15)
7toDate.setMinutes(30)
8
9<DateIntervalLabel
10  from={fromDate.getTime()}
11  to={toDate.getTime()}
12/>

输出示例：9:30 AM – 3:30 PM

TimerIntervalLabel#

用于在指定的时间区间内显示一个实时运行的计时器，可设置是否倒计时、是否在特定时间暂停等。

属性定义#

1type TimerIntervalLabelProps = {
2  from: number
3  to: number
4  pauseTime?: number
5  countsDown?: boolean
6  showsHours?: boolean
7}

示例#

1<TimerIntervalLabel
2  from={Date.now()}
3  to={Date.now() + 1000 * 60 * 12}
4  pauseTime={Date.now() + 1000 * 60 * 10}
5/>

该示例表示一个从 12 分钟开始倒计时的计时器，在倒计至 10 分钟时暂停。