CODEWITHSUNDEEP
swiftuiscrollviewtvosapple-tvlazyhgrid
jaskiratjd
jaskiratjd

Reputation: 797

Why Scrolling is not working in apple tv?

I have LazyHGrid inside the scrollview but it's not scrolling. I've tried multiple options but unfortunately didn't work.

 ScrollView(.horizontal) {
            LazyHStack {
                ForEach(1..<20) { index in
                    Text("Item \(index)")
                        .padding()
                        .foregroundColor(.white)
                        .background(Color.blue)
                        .cornerRadius(10)
                        .padding(.horizontal, 5)
                        .focusable() // Ensure each item is focusable
                }
            }
            .frame(height: 200) // Adjust height as needed
            .padding()
        }
        .padding()

Upvotes: 0

Views: 246

Answers (1)

Suprafen
Suprafen

Reputation: 303

I made a little research and found that scrolling actually works on tvOS, but since there's a remote control we use to switch between elements, we need to interact with the content differently.

So when using simulator you should use your arrows on keyboard to switch between elements. So in your case you would use ⏴ & ⏵.

You will see that scrolling does work, though there's no way to understand which element is chosen currently. So you would use @FocusState property and check its value to change background color of chosen cell.

struct ContentView: View {
    @FocusState var selectedItem: Int?
    
    var body: some View {
        ScrollView(.horizontal) {
            LazyHStack {
                ForEach(1..<20) { index in
                    Text("Item \(index)")
                        .padding()
                        .foregroundColor(.white)
                        .background(selectedItem == index ? Color.blue.opacity(0.6) : Color.blue )
                        .cornerRadius(10)
                        .padding(.horizontal, 5)
                        .focusable()// Ensure each item is focusable
                        .focused($selectedItem, equals: index) // Add this line!
                }
            }
            .frame(height: 200) // Adjust height as needed
            .padding()
        }
        .padding()
    }
}

Upvotes: 0

Related Questions