利用 SwiftUI 的 Text 顯示時間

Image for post
Image for post

SwiftUI 的 Text 專門顯示文字,因此我們通常會傳入字串,比方以下學貓叫的例子,

Image for post
Image for post

不過 Text 的能力不僅於此,從 iOS 14 開始,它連顯示時間也不是問題,接下來就讓我們看它表演吧。

顯示 Date 型別的資料

時間的型別是 Date,Text 可以直接傳入Date 型別的資料,然後搭配參數 style 控制顯示的時間格式。(style 的型別為 Text.DateStyle)

  • 顯示日期

傳入 .date。

Image for post
Image for post
  • 顯示時間

傳入 .time。

Image for post
Image for post
  • 顯示現在時間跟某某時間的間距

傳入 .relative,顯示現在時間跟某某時間的間距。比方以下時間 date 代表距離現在時間 4000 秒以前,所以得到的字串是 1 hr, 6 min,表示跟現在時間距離 1 小時 6 分鐘。

Image for post
Image for post

我們也可以傳入 .offset,顯示包含正負數的間距,比方以下時間 date 代表距離現在時間 4000 秒以前,所以顯示的字串是 +1 hour,表示現在時間距離 date +1 小時。

Image for post
Image for post

當 date 代表距離現在時間 4000 秒以後時,顯示的字串是 -1 hour,表示現在時間距離 date -1 小時。

Image for post
Image for post
  • 顯示某時間跟現在時間的間距,以 timer 格式顯示

比方 date 代表距離現在時間 4000 秒以後,顯示的字串是 1:06:39。

Image for post
Image for post

將 Date 型別的資料以自訂格式顯示

搭配 DateFormatter。

Image for post
Image for post

DateFormatter 的格式說明可參考以下連結。

顯示時間區間

我們可傳入 … 描述的時間區間。

Image for post
Image for post
Image for post
Image for post

也可以傳入以 DateInterval 描述的時間區間。

Image for post
Image for post

彼得潘的iOS App程式設計入門,文組生的iOS App程式設計入門講師,彼得潘的 Swift 程式設計入門,App程式設計入門作者,http://apppeterpan.strikingly.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store