SwiftUI - 尝试显示我的抽屉菜单时出现问题

Question

我试图在用户按下图像时显示抽屉菜单，但我在尝试这样做时遇到了问题。当我点击图像以显示抽屉菜单时，它仅覆盖屏幕的一小部分，但我希望它覆盖屏幕的整个右侧。
我在一个单独的文件中创建了抽屉菜单，如下所示：

struct Drawermenu: View {
    var body: some View {
        VStack{
            Text("Settings")
                .font(.title)
                .foregroundColor(.white)
            
            Spacer()
        }
        .padding(26)
        .background(Color.gray)
        .edgesIgnoringSafeArea(.bottom)
    }
}

我试图根据这个变量来显示它：

 @State var showMenu = false

按下图像后设置为 true：

 Image("drawermenu")
                .offset(y: -5)
                .onTapGesture {
                    showMenu.toggle()
                       
                }

当 showMenu 设置为 true 时，这就是我显示它的方式：

.overlay(
            Group {
                if showMenu {
                    Drawermenu()
                }
            }
            )

我认为我的问题是在我的代码中告诉它显示的位置。但是，我不知道将代码的最后 .overlay 部分放在哪里，这是我的整个视图的代码：

Istruct HomeScreen: View {
    
    @State var showMenu = false
   
    var body: some View {
        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()
                       
                }
               
            }
            .overlay(
            Group {
                if showMenu {
                    Drawermenu()
                }
            }
            )
         
        } 
       
        VStack{
            ScrollView{
    
                HStack{
                // some code
                } .padding(.leading, -90)
                  
            
            Text("Stockholm, Sverige")
                
            Text("Senaste besökta")
            
            Text("Nawa Barbershop")
            
                HStack (spacing: 40){
                  // some code
                
                    .offset(y: -20)
                }
    
            
            Text("Salong Dröm Aura")
               
                HStack(spacing: 40){
                Text("Snurra ditt lyckohjul hos Salong Dröm Aura")
                    // some code
                
                Circle()
                   // some code
                    .overlay(
                    Text("10")
                       // some code
                       
                    )
                    .offset(x: 45, y: -30)
                
            }
          
                HStack{
                    ZStack{
                        Rectangle()
                            // some code
                        Rectangle()
                            // some code
                            Image("crystalBarberShop")
                                .frame(width: 155, height: 86)
                            ) .cornerRadius(15)
                            .offset(y: -25)
                        Text("Crystal Barbershop")
                           
                        Text("Scheelegatan 13 - Stockholm")
                            
                        Text("Snittpris: 370 kr")
                           
                        Text("7 km")
           }
                    
                        
                    ZStack{
                        Rectangle()
                            // some code
                        Rectangle()
                           // some code
                        Text("Victor Noblesse")
                           
                        Text("Scheelegatan 13 - Stockholm")
                           
                        Text("Snittpris: 370 kr")
                           
                        Text("7 km")
                            
                    }
                   
                }
                
                HStack{
                    ZStack{
                        Rectangle()
                            // some code
                        Rectangle()
                            // some code
                        Text("Crystal Barbershop")
                            
                        Text("Scheelegatan 13 - Stockholm")
                           
                        Text("Snittpris: 370 kr")
                            
                        Text("7 km")
                           
                    }
                   
                    ZStack{
                        Rectangle()
                            // some code
                        Rectangle()
                            // some code
                        Text("Victor Noblesse")
                            
                        Text("Scheelegatan 13 - Stockholm")
                            
                        Text("Snittpris: 370 kr")
                           
                        Text("7 km")
                           
                    }
                   
                }
                HStack{
                    ZStack{
                        Rectangle()
                            
                        Rectangle()
                           
                        Text("Crystal Barbershop")
                            
                        Text("Scheelegatan 13 - Stockholm")
                                                  
                        Text("Snittpris: 370 kr")
                            
                        Text("7 km")
                          
                    }
                   
                    ZStack{
                        Rectangle()
                           
                        Rectangle()
                           
                        Text("Victor Noblesse")
                           
                        Text("Scheelegatan 13 - Stockholm")
                            
                        Text("Snittpris: 370 kr")
                         
                        Text("7 km")
                           
                    }
                  
                }
                
                HStack{
                    ZStack{
                        Rectangle()
                            .foregroundColor(.clear)
                          
                        Rectangle()
                            
                        Text("Crystal Barbershop")
                           
                        Text("Scheelegatan 13 - Stockholm")
                           
                        Text("Snittpris: 370 kr")
                           
                        Text("7 km")
                            
                    }
                    
                    ZStack{
                        Rectangle()
                           
                        Rectangle()
                           
                        Text("Victor Noblesse")
                         
                      
                        Text("Scheelegatan 13 - Stockholm")
                        
                        Text("Snittpris: 370 kr")
                         
                        Text("7 km")
                         
                    }                 
                }
                
            } .navigationBarBackButtonHidden()
        }
        Spacer()
    }
}

我尝试放置此代码：

 .overlay(
            Group {
                if showMenu {
                    Drawermenu()
                }
            }
            )

在我的代码中的其他地方，我也尝试删除我的滚动视图，看看它是否可以在没有它的情况下工作，即使我需要滚动视图，但我视图中的所有内容都崩溃了。 我还尝试将我的整个代码嵌套在 ZStack 中，但一切都崩溃了。请帮助我。

Answer 1

我认为你需要三个主要改变：

1. 在设置背景之前

   将

   .frame(maxHeight: .infinity)应用到抽屉菜单主体：

struct Drawermenu: View {
    var body: some View {
        VStack{
            // content as before
        }
        .padding(26)
        .frame(maxHeight: .infinity) // <- ADDED
        .background(Color.gray)
        .edgesIgnoringSafeArea(.bottom)
    }
}

您的
2. HomeScreen

   的主体包含多个顶级视图/容器。我建议添加一个外部 

   VStack

    来定义主体的布局：

var body: some View {
    VStack { // <- ADDED
        ZStack{
            // content as before (until step 3 below)
        }
        VStack{
            // content as before
        }
        Spacer()
    }
}

然后，您可以将抽屉式菜单作为尾随覆盖应用到外部
3. VStack

   ：

var body: some View {
    VStack {
        // see point 2 above
    }
    .overlay ( // <- ADDED
        Group {
            if showMenu {
                Drawermenu()
            }
        },
        alignment: .trailing
    )
}

这里使用的语法是 iOS 14 的语法。如果您不需要支持 iOS 14 那么您应该使用

.overlay(alignment: .trailing) { /* content */ }

 来代替。

这应该可以解决问题的主要问题，但可能还有其他布局问题需要解决。特别是，我看到您正在使用偏移来调整各种其他视图的位置。我建议使用填充代替。