CODEWITHSUNDEEP
swiftswiftuigridviewmodalviewcontroller
kevin campbell
kevin campbell

Reputation: 25

Passing a variable to the next view from a List row. SwiftUI

Hi Im new To SwiftUI I created a table using List and Grid/GridRow. The table is populated by a simple model Players. That just has the players first name, last name and score. When the users clicks on a particular players row the app should open up a Modal View and display information about that particular player.

The problem I am having is no matter which row is clicked the Modal view shows the information for the first player. At this point Im just passing the first name over to the Modal View. When I print to console the variable being passed to the Modal it shows the correct name based on the row clicked. But the console view will only show the name in the first row.

The first row the name is "Roy" on the second row its "Richard". If I click row 2. the console prints out "Richard" but the Modal view says "Roy"

here is my code import SwiftUI

    struct PlayerView: View {

    let players = [
        Players(firstName: "Roy", lastName: "Kent",score:100),
        Players(firstName: "Richard", lastName: "Montlaur",score:100),
        Players(firstName: "Dani", lastName: "Rojas",score:100)
    ]
    @State private var showingReportCard = false

    var body: some View {
        NavigationStack {
            List{
                Grid{
                    GridRow {
                        Text("First Name")
                        Text("Last Name")
                        Text("Score")
                    }
                    Divider()
                    ForEach(players){
                        player in
                        GridRow {
                            Text(player.firstName)
                            Text(player.lastName)
                            Text("\(player.score)")
                        }.onTapGesture {
                       
                        showingReportCard.toggle()
                        print(player.firstName)
                        }.sheet(isPresented: $showingReportCard) {
                        TutoringView(firstName:player.firstName)
                        }
                    }
                
                }
            }

        }
    }
}

Upvotes: 0

Views: 277

Answers (1)

sumida
sumida

Reputation: 369

As mentioned in the comments, use .sheet(item: ...) and also moving this sheet call to the NavigationStack.

struct ContentView: View {
    var body: some View {
        PlayerView()
    }
}

struct Players: Identifiable {
    let id = UUID()
    var firstName: String
    var lastName: String
    var score: Int
}

struct PlayerView: View {
    let players = [
        Players(firstName: "Roy", lastName: "Kent",score:100),
        Players(firstName: "Richard", lastName: "Montlaur",score:100),
        Players(firstName: "Dani", lastName: "Rojas",score:100)
    ]

    @State private var selectedPlayer: Players?  // <---
    
    var body: some View {
        NavigationStack {
            List{
                Grid{
                    GridRow {
                        Text("First Name")
                        Text("Last Name")
                        Text("Score")
                    }
                    Divider()
                    ForEach(players){ player in
                        GridRow {
                            Text(player.firstName)
                            Text(player.lastName)
                            Text("\(player.score)")
                        }.onTapGesture {
                            print(player.firstName)
                            selectedPlayer = player  // <---
                        }
                    }
                }
            }
        }
        .sheet(item: $selectedPlayer) { player in  // <---
            TutoringView(firstName: player.firstName)
        }
    }
}

struct TutoringView: View {
    @Environment(\.dismiss) var dismiss
    var firstName: String
    
    var body: some View {
        Text(firstName)
        Button("dismiss") {
            dismiss()
        }.buttonStyle(.bordered)
    }
}

Upvotes: 2

Related Questions