Слайдер SwiftUI HStack не появляется

Question

Я хочу сделать горизонтальную стопку изображений.К сожалению, я не могу показывать полные изображения.

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

Answer 1

Есть несколько проблем с вашим представлением.

У вас есть список вокруг вашего контента - это вызывает проблемы, потому что список прокручивается по вертикали, а я предполагаю, что вы хотите, чтобы ваши изображения прокручивались по горизонтали.

Следующим шагом является то, что вы, вероятно, не хотите, чтобы заголовок прокручивался вместе с изображениями - он должен выходить за пределы вида прокрутки.

И последнее, но не менее важное: вам нужно сделать изображения с изменяемыми размерами иустановите их пропорции так, чтобы они уменьшались, чтобы соответствовать выделенному пространству.

Попробуйте это:

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