iOS開發 - 在SwiftUI中顯示模態視圖

在SwiftUI中顯示模態視圖

簡介

這里教大家如何彈出一個簡單的模態視圖。分別有兩個頁面，ContentView和GCPresentedView，以下對應簡稱為A和B。我們要做的是在A視圖中點擊按鈕跳轉到B視圖，然后再從B視圖點擊按鈕返回到A視圖。

步驟

在A視圖中創建按鈕和模態視圖代碼

struct ContentView: View {
    @State var isPresented = false
    
    var body: some View {
        Button(action: {
            self.isPresented = true
        }, label: {
            Text("Present Modally")
        })
        .sheet(isPresented: $isPresented) {
            GCPresentedView()
        }
    }
}

使用@State對屬性進行修飾，在 SwiftUI 內部會自動轉換為一對getter,setter，對這個屬性進行賦值時會觸發視圖更新。

$isPresented能夠將值引用（引用方法是在值前方加一個$符號），當引用的值發生改變時，這個改變會向外傳遞。

.sheet方法用於彈出一個模態視圖，在SwiftUI中的定義為。

public func sheet<Content>(isPresented: Binding<Bool>, onDismiss: (() -> Void)? = nil, @ViewBuilder content: @escaping () -> Content) -> some View where Content : View

在B視圖中創建按鈕和關閉模態視圖代碼

struct GCPresentedView: View {
    @Environment(\.presentationMode) var mode
    
    var body: some View {
        Button(action: {
            self.mode.wrappedValue.dismiss()
        }, label: {
            Text("Dismiss")
        })
    }
}

@Environment獲取環境變量presentationMode，我們可以通過這個變量調用wrappedValue.dismiss()可以關閉模態視圖。

直接在 Xcode 運行預覽

總結

使用 SwiftUI 框架處理界面方便很多，不用太多的定義，我們只需要將界面進行描述出來就可以了。這個教程示例中使用到了 Button 和 Text 控件，也用到了@State, Binding, @Environment 技術點。教程很簡單，放上來大家一起學習，教程里的代碼已放在了GitHub上面，點擊這里獲取代碼。

聲明

博文作者：GarveyCalvin
博文出處：http://www.cnblogs.com/GarveyCalvin/
本文版權歸作者和博客園共有，歡迎轉載，但須保留此段聲明，並給出原文鏈接，謝謝合作！