Fullscreen LazyHStack for Images (Landscape)-CodePudding

This is my first question ever on StackOverflow so please bear with me!

How do I get a fullscreen ScrollView with LazyHStack while ignoring safe edges with the each image taking up 100% of the device screen?

I was able to get something like this that worked using TabView but since there is no "LazyTabView" it was not an efficient way to do things.. I have also tried multiple other methods utilizing Geometry Reader and frame but to no avail. Also note that I am strictly working in landscape orientation so how it looks in portrait does not matter to me.

Here is the code I'm currently using:

import SwiftUI

struct ContentView: View {
    var body: some View {
            ScrollView(.horizontal, showsIndicators: false) {
                LazyHStack() {
                    Image("test")
                        .resizable()
                        .scaledToFill()
                    Image("test")
                        .resizable()
                        .scaledToFill()
                    Image("test")
                        .resizable()
                        .scaledToFill()
                    Image("test")
                        .resizable()
                        .scaledToFill()
                }
            }
            .ignoresSafeArea()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

I have also attached an image to show the results I am getting. I am hoping I can have the image take up 100% of the screen real estate without showing the edge of the next image. As you can see the image does not fill the entire screen and instead shows the edge of the next photo. I hope this makes sense!

screenshot of code with preview

CodePudding user response：

This code worked for me:

    struct ContentView: View {
    var body: some View {
        GeometryReader { g in
            ScrollView(.horizontal, showsIndicators: false) {
                HStack() {
                    Image("test")
                        .resizable()
                        .ignoresSafeArea()
                        .frame(width: g.size.width   CGFloat(g.safeAreaInsets.leading)   CGFloat(g.safeAreaInsets.trailing), height: g.size.height   CGFloat(g.safeAreaInsets.bottom))
                        .offset(x: -CGFloat(g.safeAreaInsets.leading))
                }
            }
        }
    }
}

It will make the image take up the whole screen, ignoring the safe area. You may have to take the code out of the LazyHStack and into a HStack instead, however.

CodePudding user response：

You can use GeometryReader to fill the entire screen with the images, and set the frame of the Image views to the size of the GeometryReader. You can also use .edgesIgnoringSafeArea() to ignore the safe area and fill the entire screen.

Here's an example of how you can achieve this:

import SwiftUI

struct ContentView: View {
    var body: some View {
    ScrollView(.horizontal, showsIndicators: false) {
        LazyHStack(alignment: .center) {
            ForEach(0..<4) { _ in
                GeometryReader { geometry in
                    Image("test")
                        .resizable()
                        .scaledToFill()
                        .frame(width: geometry.size.width, height: 
geometry.size.height)
                }
                .frame(width: UIScreen.main.bounds.width, height: 
UIScreen.main.bounds.height)
            }
        }
    }
    .edgesIgnoringSafeArea(.all)
}
}

The GeometryReader allows you to read the size of the parent view and set the size of the image to fill the entire screen. The LazyHStack is used to create a horizontal scrolling view, and the ForEach loop is used to create multiple images.

Also, use .edgesIgnoringSafeArea(.all) to ignore safe areas.