CODEWITHSUNDEEP
swiftuitvos
cYberSport91
cYberSport91

Reputation: 203

SwiftUI tvOS Button/NavigationLink .focusable()

I have a straight forward SwiftUI project that's cross-platform. And I'm having a hard time working with NavigationLink on tvOS.

(Everything below is pseudocode, could be typos)

Take this for instance, this works great:

struct ContentView: View {
  var body: some View {
    NavigationView {
      ScrollView(.horizontal) {
        HStack {
          ForEach(items) { item in
            NavigationLink(destination: DetailView(item: item)) {
              Card(item: item)
            }
          }
        }
      }
    }
  }
}

A requirement I have is when you are swiping through the list, the background image changes with the focused item.

Now, what I want to do is this. But overriding .focusable() on NavigationLink seems to disable it's tapping action.

struct ContentView: View {
  // Store Focused Item
  @State private var currentItem: Item?

  var body: some View {
    NavigationView {
      ScrollView(.horizontal) {
        HStack {
          ForEach(items) { item in
            NavigationLink(destination: DetailView(item: item)) {
              Card(item: item)
            }
            // Set which item is highlighted
            .focusable(true) { isFocused in
              currentItem = item
            }
          }
        }
      }
    }
  }
}

What I've tried so far:

I thought I could be clever and use a dynamic NavigationLink, and make a focusable button that set a tag for me. This had the same result :(

struct ContentView: View {
  @State private var currentItem: Item?
  // Store Selection Tag
  @State private var selection: String? = nil

  var body: some View {
    // ...

    NavigationLink(destination: DetailView(item: item), tag: item.title, selection: $selection) {
      EmptyView()
    }
  
    Button(action: { selection = item.title }) {
      Card(item: item)
    }
    .buttonStyle(PlainButtonStyle())
    .focusable(true) { isFocused in
      currentItem = item
    }

    // ...
  }
}

** Questions **

  1. Can .focusable() be configured where it still calls the action?
  2. Is there any way of reported the current focused item?

Thanks for any help with this. This seems so straight forward, but I'm at the end of my rope.

Upvotes: 0

Views: 1177

Answers (1)

Fred Guo
Fred Guo

Reputation: 31

I found the answer. That is because when Focusable was introduced, it will break the current focus engine status. to better control the Focus behavior, don't use focusable, please use .onchange for the focus change triggered event.

Upvotes: 0

Related Questions