SwiftUI: How to show different views when clicking a button?

Question

First time I put a question, because there are no questions I haven't read. As you can see, the buttons contain a photo and description. It must be clickable on the description, title and photo. For this reason, I could not use the NavigationView and NavigationLink and when I clicked these buttons, I could not display another view. Thank you for giving a time.

struct SelectionView: View {
    @State var change = 0
         var body: some View {   
            ScrollView {
                  VStack {
                     Button(action: {
                        self.change = 1
                    }) {
                        VStack {
                            Image("name1")
                                .resizable()
                                .cornerRadius(30)
                                .shadow(radius: 20)
                                .padding()
                                .frame(width: 250, height: 250)
                            Text("name1")
                                .font(.title2)
                                .bold()
                                .foregroundColor(Color("themecolor"))
                            Text("caption")
                                .foregroundColor(.black)
                                .multilineTextAlignment(.center)
                        }
                    }
                    Button(action: {
                        self.change = 2
                    }) {
                        VStack {
                            Image("name2")
                                .resizable()
                                .cornerRadius(30)
                                .shadow(radius: 20)
                                .padding()
                                .frame(width: 250, height: 250)
                            Text("name2")
                                .font(.title2)
                                .bold()
                                .foregroundColor(Color("themecolor"))
                            Text("caption")
                                .foregroundColor(.black)
                                .multilineTextAlignment(.center)
                        }
                    }
                }
            }
        if self.change == 1 {
            FirstView()
        }
        else if self.change == 2 {
            SecondView()
        }
    }
}

Note: Xcode Version 12.4 & version iOS 14.4

edit: It can take full screen or be a board that pops up from below. I tried BulletinBoards pods but it didn't work. Of course, the user should be able to close this opened window and return to the SelectionView.

Answer 1

I solved the problem by quitting forcing to use buttons. NavigationView and NavigationLinks totally fine.

import SwiftUI

struct ContentView: View {
    @State var change = 0
    var body: some View {
        NavigationView(content: {
            ScrollView {
                VStack {
                    NavigationLink(destination: FirstView()) {
                        VStack {
                            Image("image1")
                                .resizable()
                                .cornerRadius(30)
                                .shadow(radius: 20)
                                .padding()
                                .frame(width: 250, height: 250)
                            Text("name1")
                                .font(.title2)
                                .bold()
                                .foregroundColor(Color("themecolor"))
                            Text("caption1")
                                .foregroundColor(.black)
                                .multilineTextAlignment(.center)
                        }
                    }
                    NavigationLink(destination: SecondView()) {
                        VStack {
                            Image("image2")
                                .resizable()
                                .cornerRadius(30)
                                .shadow(radius: 20)
                                .padding()
                                .frame(width: 250, height: 250)
                            Text("name2")
                                .font(.title2)
                                .bold()
                                .foregroundColor(Color("themecolor"))
                            Text("caption2")
                                .foregroundColor(.black)
                                .multilineTextAlignment(.center)
                        }
                    }
                }
            }
        })
    }
}