SwiftUI Safe Area 安全區域教學

隨著 iPhone X 的推出，出現了「瀏海 (Notch)」和底部的「Home Indicator」。為了避免內容被這些硬體特徵遮擋，iOS 引入了 Safe Area (安全區域) 的概念。

什麼是 Safe Area？

Safe Area 是一個矩形區域，保證在這個區域內的內容完全可見，不會被圓角、瀏海、相機開孔或系統手勢條遮擋。

在 SwiftUI 中，所有的 View 預設都會自動限制在 Safe Area 內。

忽略安全區域 (Ignores Safe Area)

有時候我們希望背景顏色、圖片或地圖能夠滿版延伸到螢幕的最邊緣（包含瀏海後面），這時候就需要使用 .ignoresSafeArea()。

ZStack {
    Color.blue
        .ignoresSafeArea() // 讓藍色背景延伸到全螢幕，包含狀態列
        
    VStack {
        Text("內容仍在安全區域內")
        Spacer()
    }
}

指定方向與區域

你可以控制忽略哪些邊緣或區域：

// 只忽略頂部 (狀態列/瀏海)
.ignoresSafeArea(.container, edges: .top)

// 只忽略底部 (Home Indicator)
.ignoresSafeArea(.container, edges: .bottom)

鍵盤避讓 (Keyboard Avoidance)

Safe Area 的另一個重要功能是與鍵盤的互動。在 SwiftUI 中，當虛擬鍵盤彈出時，safe area 的底部邊界會自動向上移動，這通常會自動推擠你的視圖，避免輸入框被鍵盤遮住。

大多數情況下你不需要做任何事，這就是 SwiftUI 的魔術！

VStack {
    Spacer()
    TextField("輸入訊息...", text: $text)
        .padding() // 這個輸入框會自動隨鍵盤升起
}

如果在某些複雜佈局中鍵盤遮擋了內容，請檢查你是否錯誤地使用了 .ignoresSafeArea(.keyboard)。