tvOS 14 SwiftUI custom button style breaks scrolling back

Question

Created Sep ’20

Replies 1

Boosts 0

Views 2k

Participants 2

I am trying to implement LazyHGrid on tvOS 14 with a pinned header. If I use standard buttons as grid items, the items scroll properly by changing its focus. However if I use my own custom style for the buttons, the first item is hidden behind the pinned header. Here's a repro code:

Code Block struct ContentView: View {
    var rows: [GridItem] = [GridItem(.fixed(113))]
    @State private var selected : Bool = false
    @State private var isFocused : Bool = false
    
    var body: some View {
        VStack (alignment: .leading, spacing: 0) {
            ScrollView([.horizontal]) {
                LazyHGrid (rows: rows, alignment: .top, spacing: 10, pinnedViews: .sectionHeaders, content: {
                    Section(header: HeaderView(title: "NBC").border(Color.white)){
                        ForEach((0...20), id: \.self) {
                            let codepoint = $0 + 0x1f600
                            let codepointString = String(format: "%02X", codepoint)
                                Button(action: { print("selected")}) {
                                    CellView(title: "\(codepointString)")
                                }
								// Comment out this line - it will start working properly
                                .buttonStyle(MyCustomButton())
                        }
                    }
             })
           }
        }
    }
}
struct HeaderView: View {
    @State var title : String
    
    var body: some View {
        VStack {
            Text(title).frame(width: 160)
        }
        .frame(maxWidth: .infinity, alignment: .topLeading)
        .frame(height: 113)
        .background(Color.blue)
    }
}
struct CellView : View {
    @Environment(\.isFocused) var isFocused: Bool
    @State var title : String
    
    var body: some View {
        VStack{
            Text(title).font(.headline)
            Text("Very intersting movie")
        }.padding()
        .background(isFocused ? Color.gray : Color.red)
    }
}
struct MyCustomButton: ButtonStyle {
    func makeBody(configuration: Self.Configuration) -> some View {
        configuration.label
            .frame(minWidth: 0, maxWidth: 300)
            .foregroundColor(.white)
            .background(configuration.isPressed ? Color.red : Color.green)
            
    }
}

Boost

Answer 1

alexhinson OP

Jul ’21

Hey AlexYak,

Have you found a solution to this?

0