I have a custom view InteractiveView that allows user interaction. I want to show a thumbnail of that view on an overview page (inside a NavigationLink) so the user can tap it to navigate to the the fullscreen view.

For that reason, I need the InteractiveView to be non-interactive (i.e. disabled) when it's displayed as a thumbnail. I implemented this as follows:

NavigationLink {
    InteractiveView(viewModel)
} label: {
    InteractiveView(viewModel)
        .disabled(true)
}

This works as intended (i.e. tapping the view does not interact with the view but performs the navigation to the fullscreen interactive view instead).

However, the disabled(true) modifier also changes the InteractiveView's appearance: All its subviews are faded out, i.e. their opacity is reduced and they appear semi-transparent. I understand that this is usually what I want as it signals to the user that the view is disabled and I cannot interact with it. But in my case, the user can interact with it as they can tap on it in order to show the fullscreen view.

Question:

• How can I disable the InteractiveView while keeping its original appearance (without the fade-out effect)?

• Or: Is there a better way to disable all controls in a view without changing their appearance?

CodePudding user response：

Seems like allowsHitTesting is what you may be after.

https://stackoverflow.com/a/58912816/1066424

CodePudding user response：

        NavigationLink {
            InteractiveView()
        } label: {
            InteractiveView()
                .allowsHitTesting(false)
        }