控制 SwiftUI 元件的顯示隱藏
Nov 3 · 4 min read
利用 SwiftUI 設計 App 畫面時,我們常用 if 控制元件是否顯示,比方以下程式的 if 將判斷 showLyrics 為 true 時顯示好聽的棉花糖再見王子歌詞。
struct ContentView: View {
@State private var showLyrics = false
var body: some View {
VStack {
Image("再見王子")
Toggle("顯示歌詞", isOn: $showLyrics)
if showLyrics {
Text("再見吧我的王子\n守護愛情的樣子\n讓回憶紀念最初感動的真實\n滿口永遠的孩子\n慢慢懂事\n用眼淚灌溉會幸福的種子")
}
}
}
}App 執行
當我們點選 Toggle 打開/關閉開關時,歌詞也將隨之起舞。哦,不是啦,是隨之顯示/隱藏。


當我們想隱藏的元件是文字時還可以更簡單,我們可以省略 if,直接用 ? : 做判斷,想隱藏時將內容設為空字串。
VStack {
Image("再見王子")
Toggle("顯示歌詞", isOn: $showLyrics)
Text(showLyrics ? "再見吧我的王子\n守護愛情的樣子\n讓回憶紀念最初感動的真實\n滿口永遠的孩子\n慢慢懂事\n用眼淚灌溉會幸福的種子" : "")
}不過再仔細瞧瞧剛剛歌詞顯示和隱藏的畫面,我們發現內容顯示的位置不太一樣。為什麼會這樣呢 ? 這是因為我們用 VStack 裝著呈現的內容,當不顯示歌詞時,VStack 的高度將變短並置中顯示,而顯示歌詞時 VStack 將變長並置中,造成它們顯示的位置不太一樣。
若想要元件的位置維持不變,只切換歌詞的顯示隱藏,有以下兩種方法可以做到。
方法1: 利用 Spacer
VStack {
Image("再見王子")
.padding(.top, 100)
Toggle("顯示歌詞", isOn: $showLyrics)
if showLyrics {
Text("再見吧我的王子\n守護愛情的樣子\n讓回憶紀念最初感動的真實\n滿口永遠的孩子\n慢慢懂事\n用眼淚灌溉會幸福的種子")
}
Spacer()
}
我們在 VStack 的下方加入 Spacer,讓它佔滿剩下的可用空間,因此不管歌詞是否顯示,VStack 的高度都會等同於 Safe Area,如此即可讓元件的位置維持不變。
另外由於 Spacer 會將圖文往上推,為了讓圖片跟上方保持一點距離,我們另外在 Image 上設定 padding。


方法2: 利用 hidden 保留空間
我們可以在元件上呼叫如同隱形咒語的 hidden function 讓它隱藏。雖然我們看不到它,但是它還是會可怕地佔據空間,因此 VStack 將永遠維持顯示歌詞時的高度。
VStack {
Image("再見王子")
Toggle("顯示歌詞", isOn: $showLyrics)
if showLyrics {
Text("再見吧我的王子\n守護愛情的樣子\n讓回憶紀念最初感動的真實\n滿口永遠的孩子\n慢慢懂事\n用眼淚灌溉會幸福的種子")
} else {
Text("再見吧我的王子\n守護愛情的樣子\n讓回憶紀念最初感動的真實\n滿口永遠的孩子\n慢慢懂事\n用眼淚灌溉會幸福的種子")
.hidden()
}
}
不過比起方法一,此方法的程式會比較冗長,因為在不顯示的 else 裡我們還要再寫一次生成元件的程式。


