CODEWITHSUNDEEP
swiftswiftuitvos
fguchelaar
fguchelaar

Reputation: 4909

Hide SwiftUI NavigationLink's (or Button's) hover- focus style on tvOS

I have a LazyVGrid with a bunch of NavigationLinks in it. For a nice look & feel I would like to set the .buttonStyle(.card) on them, so I get the hover and 'glimmering' effect for free.

But the drawback is that it also adds a light background to the view. Here's a quick example:

import SwiftUI

struct ContentView: View {
    let items = 1 ... 10

    var body: some View {
        NavigationView {
            LazyVGrid(columns: [GridItem(.adaptive(minimum: 200))], spacing: 16) {
                ForEach(items, id: \.self) { item in
                    NavigationLink(destination: Text("Item: \(item)")) {
                        ItemView(item: item)
                    }
                    .buttonStyle(.card)
                }
            }
        }
    }
}

struct ItemView: View {
    let item: Int

    var body: some View {
        VStack {
            Rectangle()
                .fill(.yellow)
                .strokeBorder(.blue, lineWidth: 8)
                .frame(height: 100)

            Text("Item \(item)")
        }
        .padding()
    }
}

#Preview {
    ContentView()
}

Example with added background colors

How can I prevent this from happening? Using .hoverEffect(..) and .focusEffect(..) doesn't really help, but maybe I'm approaching it all wrong...

Upvotes: 1

Views: 414

Answers (2)

walkingbrad
walkingbrad

Reputation: 1744

.buttonStyle(.borderless) might be what you're looking for. It doesn't add a background, but does add the hover effect by default, at least when you have an Image in there. But you can also add that effect yourself with .hoverEffect(.highlight)

This Apple guide was pretty useful for me to figure out how to style things correctly. https://developer.apple.com/documentation/swiftui/creating-a-tvos-media-catalog-app-in-swiftui

Upvotes: 0

ssantos
ssantos

Reputation: 16536

hoverEffectDisabled did the trick for me.

NavigationLink(destination: Text("Item: \(item)")) {
    ItemView(item: item)
}
.hoverEffectDisabled(true)

Upvotes: 1

Related Questions