CODEWITHSUNDEEP
swiftswiftuitvosswiftui-navigationlink
Hekes Pekes
Hekes Pekes

Reputation: 1335

SwiftUI: Detecting selection change in NavigationView on tvOS

I am building a SwiftUI application for tvOS and am currently trying to implement UI. I have NavigationView at the bottom and label at the top and I want label to show which NavigationLink is currently in focus. Here is my code: 

@State private var selection: String? = nil

.

ZStack {

    Color.red.edgesIgnoringSafeArea(.all)

    VStack {

            Text(selection ?? "no value").background(Color.green)

            NavigationView {
                ScrollView(.horizontal) {
                    HStack{

                        VStack {
                            NavigationLink(destination: view2, tag: "1", selection: $selection) {
                            Image("placeholder")
                                .scaledToFit().frame(width:400, height: 225) }
                            Text("Button")
                        }

                        VStack {
                            NavigationLink(destination: view2, tag: "2", selection: $selection) {
                            Image("placeholder")
                                .scaledToFit().frame(width:400, height: 225) }
                            Text("Button")

                        }

                        ...
                                                           }

                    }.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity, alignment: .bottomLeading)
                }
             }
            }
  }

However, label value doesn't change when I change selection and shows no value:

enter image description here

Any ideas what should I do there?

Upvotes: 0

Views: 801

Answers (2)

Paul Nelson
Paul Nelson

Reputation: 61

Try this:

    VStack {
        NavigationLink(destination: view2, tag: "2", selection: $selection) {
            Image("placeholder")
                .scaledToFit().frame(width:400, height: 225) }
            Text("Button")
        }.onTapGesture{ selection = "2" }
    }

The onTapGesture will override the tap on the NavigationLink, but will have the same effect.

Upvotes: 0

Mitch
Mitch

Reputation: 596

I believe your Image is taken up selection effect of your NavigationLink a simple fix would be adding a .padding() to your Image. Here is some good examples you could use to customize the NavigationLink selection. More specifically the .buttonStyle of the NavigationLink.

enter image description here

     var body: some View {
    ZStack {
        VStack{
            NavigationView {
                ScrollView(.horizontal){
                    HStack(spacing: 90) {
                        VStack{

                            NavigationLink(destination: ResultView(choice: "Chaka")) {
                                Image("chaka")
                                    .scaledToFit()
                                    .frame(width:400, height: 225)
                                    .padding(20)


                                Text("Choose Chaka")
                            }
                        }

                        VStack{
                            NavigationLink(destination: ResultView(choice: "Dr Rick Marshall")) {
                                Image("rick_marshall")
                                    .scaledToFit().frame(width:400, height: 225)
                                    .frame(width:400, height: 225)
                                    .padding(20)

                                Text("Padding 20").foregroundColor(Color.white)

                            } .buttonStyle(DefaultButtonStyle()) // buttonStyle allows for selection customiaztion ie color
                        }

                        VStack{
                            NavigationLink(destination: ResultView(choice: "Will Stanton")) {
                                Image("danny_mcBride")
                                    .scaledToFit().frame(width:400, height: 225)
                                    .frame(width:400, height: 225)


                                Text("No Padding").foregroundColor(Color.white)

                            } .buttonStyle(DefaultButtonStyle())
                        }
                    }.padding(60) // allows for selection pop out effect to be seen
                }
                .navigationBarTitle("Navigation")
            }
        }
    }
}

Upvotes: 0

Related Questions