SwiftUI: Detecting selection change in NavigationView on tvOS

Question

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:

Any ideas what should I do there?

I'm in the exact same boat - did you ever find a solution? The only way I can think to do it is overwrite `.focusable()` on NavigationLink - but then the `destination` doesn't work — cYberSport91, Sep 17 '20 at 23:20
@beamercola no I didn't ☹️. had to come up with a different ui — Hekes Pekes, Sep 18 '20 at 06:50
dang, too bad. i'm so close, but something's telling me SwiftUI just isn't ready yet. here's my code: https://stackoverflow.com/questions/63950127/swiftui-tvos-button-navigationlink-focusable — cYberSport91, Sep 18 '20 at 17:01

score 0 · Answer 1 · answered Jun 19 '20 at 22:55

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.

     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")
            }
        }
    }
}

score 0 · Answer 2 · answered Nov 03 '21 at 23:17

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.

SwiftUI: Detecting selection change in NavigationView on tvOS

2 Answers2