SwiftUI中实现Overlay视图逐个切换显示的需求求助

要实现点击按钮切换不同Overlay的效果，核心是通过状态变量控制当前显示的Overlay视图，以下是修改后的完整代码：

import SwiftUI

// 定义枚举标记当前显示的Overlay类型
enum OverlayType {
    case first, second
}

struct ContentView: View {
    // 状态变量，控制当前显示哪个Overlay
    @State private var currentOverlay: OverlayType = .first
    
    var body: some View {
        Text("hello there")
            .overlay(
                // 根据状态变量切换Overlay
                currentOverlay == .first ? firstScreenOverlay : secondScreenOverlay,
                alignment: .center
            )
    }
    
    private var firstScreenOverlay: some View {
        ZStack {
            Color.blue.opacity(0.5)
            
            Button {
                // 点击后切换到第二个Overlay
                currentOverlay = .second
            } label: {
                Text("Next")
                    .frame(maxWidth: .infinity) // 替代自定义的fullWidth()，实现宽度撑满
                    .padding()
                    .background(.white)
                    .cornerRadius(8)
                    .padding(.horizontal)
            }
        }
    }
    
    private var secondScreenOverlay: some View {
        ZStack {
            Color.red.opacity(0.5)
            
            Button {
                // 点击后切换回第一个Overlay（实现"以此类推"的循环切换）
                currentOverlay = .first
            } label: {
                Text("Back")
                    .frame(maxWidth: .infinity)
                    .padding()
                    .background(.white)
                    .cornerRadius(8)
                    .padding(.horizontal)
            }
        }
    }
}

// 预览
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

关键修改点说明： #

• 状态变量控制显示：添加@State private var currentOverlay，通过枚举OverlayType标记当前要显示的Overlay，SwiftUI会自动监听状态变化并刷新视图。
• 动态切换Overlay：在overlay修饰符中根据currentOverlay的值选择显示firstScreenOverlay或secondScreenOverlay。
• 按钮点击事件：给两个Overlay的按钮添加点击动作，修改currentOverlay的值实现切换。
• 修复语法问题：修正原代码中Button的缩进错误，用frame(maxWidth: .infinity)实现按钮宽度撑满（如果你的fullWidth()是自定义ViewModifier，也可以替换回去）。
• 循环切换支持：第二个Overlay添加了返回按钮，点击可切回第一个，实现“以此类推”的循环效果。

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