控制 SwiftUI 元件的顯示隱藏

利用 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 保留空間

VStack {
Image("再見王子")
Toggle("顯示歌詞", isOn: $showLyrics)
if showLyrics {
Text("再見吧我的王子\n守護愛情的樣子\n讓回憶紀念最初感動的真實\n滿口永遠的孩子\n慢慢懂事\n用眼淚灌溉會幸福的種子")
} else {
Text("再見吧我的王子\n守護愛情的樣子\n讓回憶紀念最初感動的真實\n滿口永遠的孩子\n慢慢懂事\n用眼淚灌溉會幸福的種子")
.hidden()
}
}

不過比起方法一,此方法的程式會比較冗長,因為在不顯示的 else 裡我們還要再寫一次生成元件的程式。

彼得潘的 Swift iOS App 開發問題解答集

彼得潘和學生們在開發 iOS App 路上曾經解決的問題集

彼得潘的 iOS App Neverland

Written by

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

彼得潘的 Swift iOS App 開發問題解答集

彼得潘和學生們在開發 iOS App 路上曾經解決的問題集

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade