SwiftUI Text 的 string interpolation 和參數 specifier & formatter
SwiftUI Text 的 string interpolation 很方便,它預設就會幫數字每三個位數加上逗號,而且我們還可以在 \() 加上參數改變顯示的格式。參數 specifier 控制小數點的位數,參數 formatter 更厲害,不只是數字,它還能控制時間,名字等資料的顯示格式。
每三個位數加上逗號
當我們以 SwiftUI 的 Text 搭配 string interpolation 的 \() 顯示數字時,它預設會聰明地幫我們每三個位數加上逗號,方便使用者更容易辨識數字。
struct ContentView: View {
var number = 1000000 var body: some View {
Text("\(number)")
.font(.largeTitle)
.background(Color.yellow) }
}
取消逗號
自動加上逗號的功能只存在 Text () 裡的 string interpolation,若是我們先將 \() 的結果存在常數,然後在生成 Text 時傳入常數,逗號將消失得無影無蹤。
struct ContentView: View {
var number = 1000000
var body: some View {
let money = "\(number)"
return Text(money)
.font(.largeTitle)
.background(Color.yellow) }
}
控制浮點數顯示的 specifier
當數字是浮點數時,我們通常會想限制小數點的位數,比方只顯示到小數點第二位。
我們可在 \() 裡加上參數 specifier 指定小數點的位數 ,以下例子的 10.567 將變成 10.57。
struct ContentView: View {
var number = 10.567
var body: some View {
Text("\(number, specifier: "%.2f")")
.font(.largeTitle)
.background(Color.yellow)
}
}
控制數字格式的 formatter
我們也可以將 \() 裡的數字變成 NSNumber,然後在 \() 裡加上參數 formatter 控制數字的格式。
formatter 的型別是 protocol Formatter,因此我們可傳入遵從 Formatter 的 NumberFormatter,使用 NumberFormatter 改變顯示的格式。接下來讓我們看看幾個例子。
- 將數字變成我們最愛的金錢格式,加上 $。
struct ContentView: View {
var number = 12000
var body: some View {
let formatter = NumberFormatter()
let numberObject = NSNumber(value: number)
formatter.numberStyle = .currency
return Text("\(numberObject, formatter: formatter)")
.font(.largeTitle)
.background(Color.yellow)
}
}
- 將數字變成百分比格式,加上 %。
struct ContentView: View {
var number = 0.7
var body: some View {
let formatter = NumberFormatter()
let numberObject = NSNumber(value: number)
formatter.numberStyle = .percent
return Text("\(numberObject, formatter: formatter)")
.font(.largeTitle)
.background(Color.yellow)
}
}
ps: 有一點要特別注意,NumberFormatter 要搭配 NSNumber,因此剛剛的例子倘若直接傳入數字 0.7 搭配 NumberFormatter 將出現問題。
其它常見的 formatter,比方顯示時間和名字
型別 Formatter 的參數 formatter 控制著字串的格式,其實不只 NumberFormatter,很多 iOS 內建的 formatter 都可以使用,比方 DateFormatter & PersonNameComponentsFormatter,讓我們看看以下的例子。
- 搭配 DateFormatter 顯示時間
struct ContentView: View {
var date = Date()
var body: some View {
let formatter = DateFormatter()
formatter.dateStyle = .short
return Text("\(date, formatter: formatter)")
.font(.largeTitle)
.background(Color.yellow)
}
}
- 搭配 PersonNameComponentsFormatter 顯示名字
將 PersonNameComponentsFormatter 的 style 設為 abbreviated,因此名字彼得潘變成縮寫潘。
struct ContentView: View {
var body: some View {
var nameComponents = PersonNameComponents()
nameComponents.givenName = "彼得"
nameComponents.familyName = "潘"
let formatter = PersonNameComponentsFormatter()
formatter.style = .abbreviated
return Text("\(nameComponents, formatter: formatter)")
.font(.largeTitle)
.background(Color.yellow)
}
}