SwiftUI 內建 SF Symbol 搭配文字 Text 的 4 種寫法！

｜文章重點預覽：

• SwiftUI：SF Symbol 文章前言
• SwiftUI：SF Symbol 搭配 HStack<Content> 使用
• SwiftUI：SF Symbol 搭配 Label<Title, Icon> 使用
• SwiftUI：SF Symbol 當照片操作，直接指定圖片大小
• SwiftUI：將 SF Symbol 轉成 Text 元件

｜SwiftUI：SF Symbol 文章前言

SF Symbol（SF 取自 San Francisco 的字首）是我們在撰寫 iOS App 的好朋友，它是 Apple 幫我們畫好的一堆圖樣，且直接內建在 iOS 裡，這意味著我們可以直接使用它們，而不需要額外準備這些照片或圖片！通常我們會稱呼它們為「Icon」或 Apple 稱呼的「Symbol」。

目前的 SF Symbol 3 已經有超過 3300 個圖樣了！用法很多，像是我們可以將一個 Symbol 圖樣塗上不同的顏色（如上圖），但這不是我們這一篇文章的重點。在這一篇文章當中，我們會分享 4 種在 iOS App 中使用 SF Symbol 的方法，可根據不同的需求、情況，搭配使用不同的元件！

而我自己最常用的會是最後一個，轉成 Text，這樣就能使用 Text 的 modifier！

｜SwiftUI：SF Symbol 搭配 HStack<Content> 使用

使用 HStack 是最簡單暴力的做法，也蠻直覺的，直接將圖片與文字並排排列，你可以 Symbol 在左、文字在右，或 Symbol 在右、文字在左。這裡使用的 firstTextBaseline 能將 Symbol 和文字對齊。

以上的程式碼會 Symbol 在左、文字在右，大致會呈現下圖上方的這個樣子：

而把 Image 和 Test 交換，就會得到上圖下方的樣子。

｜SwiftUI：SF Symbol 搭配 Label<Title, Icon> 使用

在第一種做法裡，我們使用 HStack 將 Symbol 和文字顯示在同一行，雖然這樣簡單易懂，而且不會忘記，但行數有點多，為了讓程式碼變得更簡潔，我們還有一個 Label 元件可以使用！讓單單只為了讓 Symbol 和文字顯示在同一行的 HStack 變成只有一行程式碼而已！

Label 呈現的樣子，會和 HStack 一樣。但比較可惜的是，Label 元件只能 Symbol 在左、文字在右，所以如果你是想要 Symbol 在右、文字在左的話，還是得用 HStack 才行。

｜SwiftUI：SF Symbol 當照片操作，直接指定圖片大小

在前面的兩種做法裡，不管是 Label 或 HStack，可能預設的大小並不適合你，你會希望 Symbol 和文字大一點或小一點，這時你除了要指定 Text 的字型或大小，還必須也要指定 Symbol 的大小，不然你的 Symbol 和文字會看起來不一樣大，這不會是一個好看的 UI 介面⋯⋯。

要指定 Symbol 的大小有兩種方法，畢竟我們使用的是「Image」，它就是一張圖片、照片，所以可以當作照片操作。

－指定 SF Symbol 的大小：imageScale

imageScale 這個 modifier 可以指定：大（large）、中（medium）、小（small），三種縮放尺寸。

以上的程式碼大中小分別會呈現以下這個樣子：

－指定 SF Symbol 的大小：frame

frame 是我們在操作圖片大小時常用到的 modifier，讓我們想讓照片多大就多大，要多小就多小，只要指定寬 width 和高 height 就行了。

像這裡我們指定寬高都是 50，想要的話也可以輸入浮點數。

註：resizable 讓圖片可以縮放、scaledToFit 讓圖片不會因縮放而變形。

｜SwiftUI：將 SF Symbol 轉成 Text 元件

將 Symbol 轉成 Text 元件是我覺得最實用的使用方式！在知道可以這樣寫之前，其實很難想到可以這麼做！

當我們 iOS App 寫多的時候，可能會遇到一些情況，像是：想讓 Symbol 跟文字一樣粗體、想讓 Symbol 跟文字同個字型（如：title），或甚至想讓 Symbol 出現在一段文字的中間，當文字換行時也不影響或也跟著換行！這在 HStack 中其實蠻難做到的。

而如果你也跟我一樣，對 UI 畫面、美感很要求的話，在上一種寫法「SF Symbol 當照片操作，直接指定圖片大小」中，你可能會覺得並不知道要讓 Symbol 的大小指定為多少比較恰當，或剛剛好，因為那是用試出來的，感覺寬高指定為這樣「看起來」跟文字「差不多」一樣大，但這樣真的很討厭。

所以，其實我們可以直接將 Image 轉成 Text！它就變成了像文字一樣的一個「字」！你可以對它使用任何 Text 可以用的 modifier（如：粗體），也能與 Text 做相加。

你可以發現，其實我們只是將原本的 Image 外面再包一個 Text 就變成了文字！所以我們可以將 Symbol 與文字相加，這裡我們用括號讓 modifier bold 粗體和 font(.title3) 字型作用在這個相加起來的 Text 元件。

上面的程式碼大致會呈現這個樣子：

你會發現它其實就是一個文字，顯示在句子當中，而且也是粗體，字型也是標題！將 Symbol 轉成 Text 之後，你就可以對它做所有文字才能做的操作了。這個感覺有點像 Emoji。