SwiftUI 背景如何渲染於Status Bar底下

在 WWDC 2019 大會上，Apple 發佈了全新的框架SwiftUI，讓你用更少的程式碼來設計及開發iOS App．

以往Swift的底層依舊是Object C，而SwiftUI已將底層全面換成Swift語法．

Swift: UIKit通常需要搭配storyboards一起使用，而SwitfUI完全使用程式碼來建構，並且可搭配Automatic Preview來即時預覽畫面．

設計App時，通常會設定自己的背景圖片，接下來我們來看如何設定

Step 1: 建立Image Set

在左邊目錄中選取 Assets.xcassets後，在右邊選項中按右鍵，新增ImageSet (在此以loginBackground為例)並將圖片拖曳至虛線框中．

Step 2: 新增Background

回到主頁面中，使用ZStack設定背景圖和文字．

Image中填入剛剛所設定的ImageSet的名稱．

ContentView.swift

struct ContentView: View {
    var body: some View {
        ZStack {
            Image("loginBackground").resizable()
            Text("Hello, world!")
                .padding()
        }
    }
}

會發現Status Bar的部分，還是預設的白色，並沒有被藍色背景所涵蓋．

Step 3: 屬性 : edgesIgnoringSafeArea

將ZStack添加屬性: edgesIgnoringSafeArea，並指定方向為vertival

ContentView.swift

struct ContentView: View {
    var body: some View {
        ZStack {
            Image("loginBackground").resizable()
            Text("Hello, world!")
                .padding()
        }.edgesIgnoringSafeArea(.vertical)
    }
}

這樣就可以看到status bar的背景已被圖片所替換掉了．