NavigationLink button focusable override issue

Question

I face an issue which stucks for days. I am createing a tvos application which reqiures a custome navigationlink(button), when I move the focus to the navigation item, it should scale a little bit, and also I need to change the parent's view backgound. It is pretty simple, but it seems that the focusabe override the my custome button Style. The test shows that the background image was changed but without any scale effect when the navigationbutton get focused. Any suggestion?

NavigationLink(destination: Text("myview"))
{Text("Test")
}
.buttonStyle(myButtonStyle())
.Focusable(true){(focus) in 
//the code to change the background image


//myButtonStyle definition
struct MyButtonStyle: ButtonStyle { 
  func makeBody(configuration: Configuration) -> some View {
    return AppButton(configuration: configuration)
  }
  }
  
  struct AppButton: View {
    @Environment(\.isFocused) var focused: Bool
    let configuration: ButtonStyle.Configuration
      var body: some View {
      configuration.label
             .scaleEffect(focused ? 1.1 : 1.0)
            .focusable(true) 
          }
        }
    

The line to change the background image is always called when the item get focused as my expected, but the scale effect is gone. If I remove the following line of codes, the scale effect is back:

//      .Focusable(true){(focus) in 
        //the code to change the background image
//       }

It looks like that this line of code override my custome style of navigation button, any ideas? Appreciate any help!

Answer 1

Ah, finally I found the tricky, though there is very little document about this. When Focusable was introduced, it should not be in your code to change focus engine, which will cause the navigationlink tap message uncaptured, then your navigationlink for another view will not work. Use .onChange() function to deal with any focus change event, not use Focusable.