SwiftUI抽屉菜单显示异常：点击后仅覆盖小区域而非全屏右侧

核心问题分析 #

你当前把抽屉菜单的overlay绑定到了顶部的HStack上，而这个HStack只占据顶部导航栏的有限空间，导致菜单被约束在该区域内。另外，你的HomeScreen存在多个顶层视图（独立的ZStack、VStack、Spacer），这本身违反SwiftUI布局规则，也是导致调整布局后混乱的根源。

修复步骤 #

1. 将所有内容包裹在单个顶层ZStack中，确保抽屉菜单能覆盖全屏
2. 修改Drawermenu的布局参数，让它占据屏幕右侧完整空间
3. 添加半透明背景层，增强交互体验并遮挡底层内容

修正后的代码 #

1. 更新Drawermenu结构

struct Drawermenu: View {
    var body: some View {
        VStack{
            Text("Settings")
                .font(.title)
                .foregroundColor(.white)
            
            Spacer()
        }
        .padding(26)
        .background(Color.gray)
        // 设置菜单宽度（可自定义），高度占满全屏
        .frame(width: 300, maxHeight: .infinity)
        .edgesIgnoringSafeArea(.all)
    }
}

2. 重构HomeScreen布局

struct HomeScreen: View {
    @State var showMenu = false
    @State var userSearch = "" // 补充原代码缺失的状态变量
    
    var body: some View {
        ZStack(alignment: .trailing) { // 对齐到右侧，适配抽屉从右滑入的交互
            // 主内容区域
            VStack{
                // 顶部导航栏
                ZStack{
                    Color.purple
                        .ignoresSafeArea()
                        .frame(height: 50)
                   
                    HStack{
                        TextField("Salong, område...", text: $userSearch)
                            .frame(width: 250, height: 20)
                            .padding(EdgeInsets(top: 8, leading: 35, bottom: 8, trailing: 16))
                            .fontWeight(.black)
                            .background(RoundedRectangle(cornerRadius: 13).fill(Color.white))
                            .offset(x: -14, y: -5)
                            .overlay(
                                    Image(systemName: "magnifyingglass")
                                        .offset(x: -145, y: -4)
                                )
                        
                        Image("drawermenu")
                        .offset(y: -5)
                        .onTapGesture {
                            showMenu.toggle()
                        }
                    }
                }
                
                // 滚动内容区
                ScrollView{
                    HStack{
                        // 保留原代码内容
                    } .padding(.leading, -90)
                      
                    Text("Stockholm, Sverige")
                    Text("Senaste besökta")
                    Text("Nawa Barbershop")
                    
                    HStack (spacing: 40){
                        // 保留原代码内容
                    } .offset(y: -20)
                    
                    Text("Salong Dröm Aura")
                    // 其余ScrollView内容保持不变...
                }
                .navigationBarBackButtonHidden()
            }
            
            // 抽屉菜单及背景层
            if showMenu {
                // 半透明背景，点击可关闭菜单
                Color.black.opacity(0.5)
                    .ignoresSafeArea()
                    .onTapGesture {
                        showMenu.toggle()
                    }
                
                // 抽屉菜单，添加滑入动画
                Drawermenu()
                    .transition(.move(edge: .trailing))
            }
        }
    }
}

关键改动说明 #

• 所有内容统一放入顶层ZStack，设置alignment: .trailing让菜单默认靠右显示
• 抽屉菜单通过frame(width: 300, maxHeight: .infinity)确保占满屏幕高度，宽度可根据需求调整
• 新增半透明背景层，既可以遮挡底层内容，又支持点击关闭菜单
• 移除原错误的overlay调用，改为在顶层ZStack中直接挂载菜单视图
• 补充原代码缺失的userSearch状态变量
• 给菜单添加transition动画，优化显示/隐藏的流畅度

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