Showing multiple sheets from buttons and context menus

Question

In my app, I have multiple buttons that will all call a new view through .sheet. These buttons are in various HStacks, VStacks, and .contextMenus. I want to be able to call a different sheet depending on the button but can't seem to find a way to do it.

The code below is showing a List I have where each row has a context menu linked to it, these buttons inside the context menu are where I want to call some of these sheets from.

Main View Code:

VStack{
    HStack{
        Button(action: {}){
            //Insert Button Text Here
        }
    }
    List{
        ForEach(homeTeam.players){ player in
            HStack{
                Text("\(player.shirtNumber) - \(player.playerName)")
                Spacer()
                Text("\(player.timerText)")
            }
             .foregroundColor(player.active ? Color.black : Color.gray)
             .contextMenu{
                 PlayerContextMenu(team: homeTeam, player: player) //References the buttons below for the context menu
             }
        }
    }
}

Context Menu Code:

struct PlayerContextMenu: View{
    
    @ObservedObject var team: Team
    @ObservedObject var player: Player
    
    var body: some View{
        Button(action: {}) { //I want to open up a specific sheet here
            Text("Edit Name")
            Image(systemName: "square.and.pencil")
        }
    }
}

You need `.sheet(item:` modifier. See example here https://stackoverflow.com/a/61176759/12299030. — Asperi, Nov 22 '20 at 14:03
When I do this, I get the `The compiler is unable to type-check this expression in reasonable time` error — benpomeroy9, Nov 22 '20 at 14:50

score 0 · Answer 1 · edited Nov 22 '20 at 20:58

I think the solution is to attach the sheets to empty views. Please see example below.

.background(EmptyView()
                .sheet(isPresented: $showingFirstSheet, content: {
                    FirstSheetView(isPresented: $showingFirstSheet)
                })
                .background(EmptyView()
                                .sheet(isPresented: $showingSecondSheet) {
                                    SecondSheetView(isPresented: $showingSecondSheet)
                                }
                )
)

In full context.

struct ContentView: View {
    @State private var showingFirstSheet: Bool = false
    @State private var showingSecondSheet: Bool = false

    var body: some View {
        VStack {
            Button(action: {
                showingFirstSheet.toggle()
            }, label: {
                Text("Show first sheet")
            })
            
            Button(action: {
                showingSecondSheet.toggle()
            }, label: {
                Text("Show second sheet")
            })
        }
        .background(EmptyView()
                        .sheet(isPresented: $showingFirstSheet, content: {
                            FirstSheetView(isPresented: $showingFirstSheet)
                        })
                        .background(EmptyView()
                                        .sheet(isPresented: $showingSecondSheet) {
                                            SecondSheetView(isPresented: $showingSecondSheet)
                                        }
                        )
        )
    }
}

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

struct FirstSheetView: View {
    
    @Binding var isPresented: Bool
    
    var body: some View {
        Text("First Sheet")
    }
}

struct SecondSheetView: View {
    
    @Binding var isPresented: Bool
    
    var body: some View {
        Text("Second Sheet")
    }
}

Showing multiple sheets from buttons and context menus

1 Answers1