SwiftUI：实现Sheet覆盖或单Sheet内导航的解决方案问询

问题场景 #

当前代码中，点击"Get Started"打开LoginUserSheetView，在该Sheet内点击注册按钮又会打开RegisterUserSheetView，导致两个Sheet叠加显示。需要实现打开新Sheet时自动关闭旧Sheet，或者在单个Sheet内完成登录到注册的导航。

现有核心代码 #

打开LoginSheet的按钮

private var getStartedButton: some View {
    Button {
        showGetStartedSheet.toggle()
    } label: {
        Text("Get Started")
    }
    .sheet(isPresented: $showGetStartedSheet) {
        LoginUserSheetView()
            .presentationDetents([.fraction(0.70), .large])
    }
}

LoginSheet内的注册按钮

private var userCreateAccount: some View {
    VStack(alignment: .center) {
        Text("New MapGliders? User register")
            .sheet(isPresented: $showUserRegisterSheet) {
                RegisterUserSheetView()
                    .presentationDetents([.fraction(0.70), .large])
            }
    }
}

解决方案一：打开新Sheet时关闭旧Sheet #

通过@Binding传递旧Sheet的显示状态，在打开新Sheet前主动关闭旧Sheet。

步骤1：修改LoginUserSheetView，添加绑定变量 #

struct LoginUserSheetView: View {
    @Binding var isPresented: Bool // 绑定外层Sheet的显示状态
    @State private var showUserRegisterSheet = false
    
    var body: some View {
        VStack {
            // 原有登录相关UI
            userCreateAccount
        }
    }
    
    private var userCreateAccount: some View {
        VStack(alignment: .center) {
            // 把Text改成Button，触发状态变更
            Button("New MapGliders? User register") {
                isPresented = false // 先关闭当前LoginSheet
                showUserRegisterSheet = true // 打开注册Sheet
            }
            .sheet(isPresented: $showUserRegisterSheet) {
                RegisterUserSheetView()
                    .presentationDetents([.fraction(0.70), .large])
            }
        }
    }
}

步骤2：修改调用LoginUserSheetView的代码，传递绑定 #

private var getStartedButton: some View {
    Button {
        showGetStartedSheet.toggle()
    } label: {
        Text("Get Started")
    }
    .sheet(isPresented: $showGetStartedSheet) {
        LoginUserSheetView(isPresented: $showGetStartedSheet) // 传递绑定
            .presentationDetents([.fraction(0.70), .large])
    }
}

解决方案二：在单个Sheet内实现导航（推荐） #

使用NavigationStack在同一个Sheet内完成登录到注册的页面跳转，避免多个Sheet叠加。

步骤1：创建包含导航的统一AuthSheet #

// 统一的认证Sheet根视图
struct AuthSheetView: View {
    @Binding var isPresented: Bool
    
    var body: some View {
        NavigationStack {
            LoginView()
                .navigationTitle("Login")
                .toolbar {
                    ToolbarItem(placement: .cancellationAction) {
                        Button("Close") {
                            isPresented = false
                        }
                    }
                }
        }
        .presentationDetents([.fraction(0.70), .large])
    }
}

// 登录页面
struct LoginView: View {
    @State private var navigationPath = NavigationPath()
    
    var body: some View {
        VStack(spacing: 20) {
            // 原有登录UI元素
            Button("New MapGliders? User register") {
                navigationPath.append("register") // 跳转到注册页
            }
        }
        .navigationDestination(for: String.self) { route in
            if route == "register" {
                RegisterView()
                    .navigationTitle("Register")
            }
        }
    }
}

// 注册页面
struct RegisterView: View {
    var body: some View {
        VStack(spacing: 20) {
            // 原有注册UI元素
            appleButton
        }
    }
    
    private var appleButton: some View {
        Button {
            // Apple登录逻辑
        } label: {
            HStack(alignment: .firstTextBaseline) {
                Image(systemName: "applelogo")
                Text("Hello")
            }
        }
    }
}

步骤2：修改Get Started按钮的Sheet调用 #

private var getStartedButton: some View {
    Button {
        showGetStartedSheet.toggle()
    } label: {
        Text("Get Started")
    }
    .sheet(isPresented: $showGetStartedSheet) {
        AuthSheetView(isPresented: $showGetStartedSheet)
    }
}

方案对比 #

• 方案一：适合需要完全独立Sheet的场景，逻辑简单但需要管理多个状态变量
• 方案二：更符合用户操作习惯，导航流畅，适合登录注册这类流程化操作，推荐使用

内容的提问来源于stack exchange，提问作者SLE