如何不使用NavigationView实现SwiftUI视图间的转场

问题分析 #

你当前的实现里，子视图嵌套在主视图的VStack内部，导致它仅在主视图剩余空间显示，且主视图内容始终可见。要实现完整的视图切换效果，需要让子视图覆盖整个屏幕，同时调整布局层级确保遮挡主视图。

修改方案 #

1. 将主视图内容与子视图放在同一个ZStack中，让子视图具备覆盖主视图的布局基础
2. 给子视图添加全屏背景，彻底遮挡主视图内容
3. 保留过渡动画，保证切换过程的流畅性

修改后的完整代码 #

struct MainView: View {
    @State private var push = false

    var body: some View {
        ZStack {
            // 主视图内容区域
            VStack {
                HStack{
                    Spacer()
                    Button {
                        push.toggle()
                    } label: {
                        Image(systemName:"plus.circle")
                            .resizable()
                            .scaledToFit()
                            .frame(height: 30)
                    }
                }
                .padding()
                .background(Color.gray)
                
                // 主视图其他内容区域
                Spacer()
            }
            .padding()
            
            // 子视图：仅在push为true时显示，覆盖主视图
            if push {
                CreateRoutineView(push: $push)
                    .transition(.asymmetric(insertion: .move(edge: .trailing), removal: .move(edge: .trailing)))
                    .zIndex(1) // 确保子视图处于最上层
            }
        }
    }
}

#Preview {
    MainView()
}

struct CreateRoutineView: View {
    @Binding var push: Bool

    var body: some View {
        ZStack {
            // 全屏背景，彻底遮挡主视图
            Color.white
                .ignoresSafeArea()
            
            VStack {
                HStack {
                    Spacer()
                    Button {
                        push.toggle()
                    } label: {
                        Text("Save")
                            .font(.title)
                    }
                    .padding()
                }
                .padding()
                .background(Color.gray)
                
                // 子视图其他内容区域
                Spacer()
            }
        }
    }
}

#Preview {
    @Previewable @State var push: Bool = false
    CreateRoutineView(push: $push)
}

关键修改说明 #

• 把子视图从主视图的VStack中移出，放到外层ZStack中，让它拥有覆盖整个屏幕的布局空间
• 给CreateRoutineView添加全屏背景并设置ignoresSafeArea()，确保完全遮挡主视图
• 通过zIndex(1)明确子视图的层级优先级，避免布局层级冲突
• 主视图内添加Spacer()优化内容布局结构

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