Blurred selected button on tvOS

Question

Created 1w

Replies 2

Boosts 0

Participants 2

The following code shows that a selected button in a list gots blurred if a glass effect is applied to the list. This happens if the button style is plain or glass. It does not happen if the button style is bordered. Is this a wanted documented behavior or is this a bug?

struct ContentView: View {
    @State private var items = [
        "Item 1", "Item 2", "Item 3", "Item 4"]
    
    var body: some View {
        ZStack {
            Image(systemName: "globe")
                .resizable()
            List(items, id: \.self) { item in
                Button(action: {}, label: { Text(item) })
            }
            .padding()
            .glassEffect(in: Rectangle())
        }
    }
}

Boost

Answer 1

DTS Engineer OP

Apple

1w

For buttons use the .buttonStyle(.glass) modifier. This applies Liquid Glass based on the button’s context.

If you haven’t already, you can review the Applying Liquid Glass to custom views documentation for examples on how to configure views using Liquid Glass effects.

0

Answer 2

patrickfromkoblenz OP

3d

I added the button style .glass but this does not change anything. Button styles .bordered, .plain.or .glassProminent produce a sharp selected button. Button styles .glass or .automatic to a blurred selection.

struct ContentView: View {
    @State private var items = [
        "Item 1", "Item 2", "Item 3", "Item 4"]
    
    var body: some View {
        ZStack {
            Image(systemName: "globe")
                .resizable()
            List(items, id: \.self) { item in
                Button(action: {}, label: { Text(item) })
                    .buttonStyle(.glass)
            }
            .padding()
            .glassEffect(in: Rectangle())
        }
    }
}

0