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)
}
}
