1

I want to make a horizontal stack of images. Unfortunately I am not able to slide to see full images.


struct ContentView: View {
    var body: some View {
        NavigationView {
                List {

                    ScrollView {
                        VStack{
                            Text("Images").font(.title)
                        HStack {

                            Image("hike")
                            Image("hike")
                            Image("hike")
                            Image("hike")


                        }
                        }

                }.frame(height: 200)
            }
        }
    }
}

enter image description here

  • Try this : https://stackoverflow.com/questions/31668970/is-it-possible-for-uistackview-to-scroll – Insou Sep 19 '19 at 13:26
  • This is really strange because copy-pasting your exact code I can slide through all the images scrolling horizontally with no problems. Which version of xCode are you using? (I mean: which beta version). – matteopuc Sep 19 '19 at 15:25
  • 11A420a. I don't know, I will skip it for now. Thanks for answer @superpuccio - actually it helped me :> – Marcin Frankowski Sep 19 '19 at 16:31

1 Answers1

1

There are a couple of issues with your view.

You have got a List around your content - it causes problems because a list scrolls vertically, while I assume you want your images to scroll horizontally.

Next thing is that you probably don't want your title to scroll with the images - it needs to go outside the scroll view.

Last but not least, you need to make the images resizable and set their aspect ratio so that they are scaled down to fit the allocated space.

Try this:

struct ContentView: View {

    var body: some View {
        NavigationView {
            VStack{
                Text("Images").font(.title)
                ScrollView(.horizontal) {
                    HStack {
                        Image("hike")
                            .resizable()
                            .aspectRatio(contentMode: .fit)
                        Image("hike")
                            .resizable()
                            .aspectRatio(contentMode: .fit)
                        Image("hike")
                            .resizable()
                            .aspectRatio(contentMode: .fit)
                        Image("hike")
                            .resizable()
                            .aspectRatio(contentMode: .fit)
                    } .frame(height: 200)
                    Spacer()
                }
            }
        }
    }
}
LuLuGaGa
  • 7,996
  • 4
  • 31
  • 43