如何使用 SwiftUI 中的按鈕導航一個視圖

Question

我有一個帶有TabView的ContentView 。 當我在AddItemView中添加一個項目並按下保存按鈕時，我想打開MyDataView 。 我已經嘗試過NavigationLink但這顯示了一個奇怪的嵌套NavigationView 。 按下保存按鈕后，我該怎么做才能呈現MyDataView ？

struct ContentView: View {
    var body: some View {
        TabView() {
            MyDataView()
                .tabItem {
                    Image(systemName: "chevron.down.circle.fill")
                    Text("My Data")
            }.tag(1)
            AddItemView()
                .tabItem {
                    Image(systemName: "chevron.up.circle")
                    Text("Add Item")
            }.tag(2)
        }
    }
}

struct AddItemView: View {
    var body: some View {
        NavigationView {
            Form {
                // My Form with textfields
                Button(action: {
                    //save
                }) {
                    Text("Add")
                }
            }
            .navigationBarTitle(Text("Add Item"))
        }
    }
}

struct MyDataView: View {
    var body: some View {
        NavigationView {
            List(["foo", "bar"], id: \.self) { item in
                Text(item)
            }
            .navigationBarTitle(Text("My Data"))
        }
    }
}
´´´

Answer 1

這是一個可能的解決方案。 用 Xcode 12 測試。

僅修改組件：

struct DDContentView: View {
    @State private var selection: Int = 1     // << here

    var body: some View {
        TabView(selection: $selection) {      // << here 
            MyDataView()
                .tabItem {
                    Image(systemName: "chevron.down.circle.fill")
                    Text("My Data")
            }.tag(1)
            AddItemView() { 
                  self.selection = 1      // in callback change selection
            }
                .tabItem {
                    Image(systemName: "chevron.up.circle")
                    Text("Add Item")
            }.tag(2)
        }
    }
}

struct AddItemView: View {
    var completion: () -> ()    // << here !!

    var body: some View {
        NavigationView {
            Form {
                // My Form with textfields
                Button(action: {
                    //save
                    self.completion()    // << callback !!
                }) {
                    Text("Add")
                }
            }
            .navigationBarTitle(Text("Add Item"))
        }
    }
}

Answer 2

您可以創建一個 ObservableObject 並使用它來跟蹤 TabView 中選定的選項卡，然后只需將其傳遞給要切換選項卡的所有視圖。 像這樣：

class AppState: ObservableObject {
    @Published var currentTab: Tab = .data
}

enum Tab {
  case data, item
}

struct ContentView: View {
    @ObservedObject var appState = AppState()
    
    @State var currentTab: Tab
    
    var body: some View {
        TabView(selection: $appState.currentTab) {
            MyDataView()
                .tabItem {
                    Image(systemName: "chevron.down.circle.fill")
                    Text("My Data")
                }.tag(Tab.data)
            AddItemView(appState: appState)
                .tabItem {
                    Image(systemName: "chevron.up.circle")
                    Text("Add Item")
            }.tag(Tab.item)
        }
    }
}

struct AddItemView: View {
    @ObservedObject var appState: AppState
    
    var body: some View {
        NavigationView {
            Form {
                // My Form with textfields
                Button(action: {
                    appState.currentTab = .data
                }) {
                    Text("Add")
                }
            }
            .navigationBarTitle(Text("Add Item"))
        }
    }
}

struct MyDataView: View {
    var body: some View {
        NavigationView {
            List(["foo", "bar"], id: \.self) { item in
                Text(item)
            }
            .navigationBarTitle(Text("My Data"))
        }
    }
}