Full screen lazy stacks do not scroll on AppleTV.

Question

I have a really simple app where I am trying to scroll full page between images. However the if I use a LazyHStack the scrolling stops working if a child item is full screen. LazyVStack has the same issue if the content is full screen then scrolling stops working. Normal stacks work but that defeats the purpose since all items have to load. Oh this need to scroll horizontally.

Code is so:

struct ContentView: View {
    var body: some View {
        GeometryReader { geometry in
            ScrollView(.horizontal) {
                LazyHStack {
                    ForEach(1...50, id: \.self) { index in
                        Button(action: {}){ Text("\(index)")}
                            .frame(width: geometry.size.width, height: geometry.size.height)
                    }
                }
            }
        }
        .ignoresSafeArea()
    }
}

SwiftUI
tvOS

1.5k

Posted by

venturabumm

Reply

Add a Comment

Answer 1

Any clues? Any one?

Posted by

venturabumm

Add a Comment

Answer 2

I struggled with this as well. However, I found a different way that achieves the same objective while working on AppleTV. That is to use a TabView which when styled works like a page controller. This allows you to swipe left/right on a an array of images. Given it works page by page and loading is as-needed so it works like a lazystack. Here is a full example for you (note I styled it so that it doesn't show page markers, but you can simply use .page if you want them).

struct SlideshowViewer: View {
    
    @State private var gallery = GalleryPublisher.shared
    
    var body: some View {
        TabView {
            ForEach(gallery.slideshow, id:\.self) { slideshow in
                ImageView(slideshow: slideshow)
                    .focusable(true)
                    .frame(width:UIScreen.main.bounds.width,height: UIScreen.main.bounds.height)
                    .edgesIgnoringSafeArea(.all)
            }
        }
        .tabViewStyle(.page(indexDisplayMode: .never))
    }
}
    
struct ImageView: View {
    var slideshow:Slideshow
    @State private var galleryImage:UIImage?
    
    var body: some View {
        if let image = galleryImage {
            Image(uiImage: image)
                .resizable()
                .aspectRatio(contentMode:.fill)
        } else {
            ZStack {
                Rectangle()
                ProgressView()
                    .progressViewStyle(CircularProgressViewStyle(tint: .blue))
            }
            .foregroundColor(.white)
            .onAppear {
                NetworkManager.shared.downloadImage(urlStr: slideshow.link) { image in
                    galleryImage = image
                }
            }
        }
    }
}

Posted by

Gant

Add a Comment

Answer 3

@Gant, I really like this solution. I also like that passing a value to selection allows me to jump to the image selected in my thumbnail in my LazyVGrid.

One thing that I'm struggling with is that (with TabView) the swipe direction on the AppleTV remote is the opposite of what a user would expect when in full screen swiping. Do you know of any way to solve this?

Posted by

sgorneau

Add a Comment

Full screen lazy stacks do not scroll on AppleTV.

Replies