Question

如何导航到我在 swiftui 中创建的其他视图？下面是我自己尝试做的侧栏的一些代码。我遇到的问题是白屏显示为一个巨大的白色按钮。

VStack {
         NavigationView {   
            HStack {
                NavigationLink(destination: SettingsView()) {
                    Text("Settings")
                        .font(.system(size:20))
                        .foregroundColor(.black)
                    }
                }
    
                NavigationLink(destination: Settings()) {
                    Text("Settings")
                    .font(.title2)
                }
            }
            NavigationLink(destination: AboutUs()) {
                  Text("About us")
                    .font(.title2)
                    
                }
        }
    }

}

Answer 1

除非您在 NavigationView 中（它在 iOS 和 macOS 上具有非常具体的外观），否则您不会使用 NavigationLink。由于您正在制作自己的侧边栏，这意味着您不会使用导航视图/链接。

相反，您可以使用带有@Published 属性的@State 变量或ObservableObject 来跟踪哪个视图处于活动状态。我在这个例子中选择了后者：



enum ViewTypes {
    case main
    case settings
    case aboutUs
}

class SidebarNavigationManager : ObservableObject {
    @Published var viewType : ViewTypes = .main
}

struct ContentView: View {
    @StateObject var navigationManager = SidebarNavigationManager()
    
    var body: some View {
        HStack(alignment: .top) {
            SidebarView(navigationManager: navigationManager)
            .frame(width: 100)
                .frame(maxHeight: .infinity)
            .border(Color.green)
            
            //Main content
            VStack {
                switch navigationManager.viewType {
                case .main:
                    MainView()
                case .settings:
                    SettingsView()
                case .aboutUs:
                    AboutUsView()
                }
            }.frame(maxWidth: .infinity)
        }.frame(maxWidth: .infinity, maxHeight: .infinity)
    }
}

struct SidebarView : View {
    @ObservedObject var navigationManager : SidebarNavigationManager
    
    var body: some View {
        //Sidebar
        VStack {
            Button(action: { navigationManager.viewType = .main }) {
                Text("Main")
            }
            Button(action: { navigationManager.viewType = .settings }) {
                Text("Settings")
            }
            Button(action: { navigationManager.viewType = .aboutUs }) {
                Text("About Us")
            }
        }
    }
}

struct MainView : View {
    var body: some View {
        Text("Main")
    }
}

struct SettingsView : View {
    var body: some View {
        Text("Settings")
    }
}

struct AboutUsView : View {
    var body: some View {
        Text("About Us")
    }
}

如何快速导航到侧栏中的不同视图？

1 个答案: