Full screen lazy stacks do not scroll on AppleTV.

Question

Created Jul ’21

Replies 3

Boosts 0

Views 1.8k

Participants 3

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()
    }
}

Boost

Answer 1

venturabumm OP

Jul ’21

Any clues? Any one?

0

Answer 2

Gant OP

Oct ’21

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
                }
            }
        }
    }
}

0

Answer 3

sgorneau OP

Nov ’21

@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?

0