如何创建与多个可点击按钮组合的水平滚动视图？

Question

我的问题是，我创建了一个具有不同类型图像的水平滚动视图。这些水平视图中的图像是使用

ForEach

命令创建的，并加载到屏幕上。现在我用一个按钮连接了每张图片，但我不知道如何导航到另一个 Swift 文件以便在那里运行其他东西的不同代码。

我将向您发布下面的代码也许您可以帮助我，因为我真的被困了好几天。预先感谢。

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack{
            ScrollView(.horizontal, showsIndicators: false) {
                HStack{
                ForEach(0..<10){i in
                    cardView(img: "img\(i)").padding(10)
                }

                }
            }
            
        }.background(Image("Apple_Background").resizable().aspectRatio(contentMode: .fill))
    
        }
    }


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

struct cardView : View {
    
    
    var img = ""
    var body: some View{
    
        VStack{
            Button(action:  {
                **//Part where i have problems because here the action of the button happens**
            }) {
                
            Image(img).resizable().frame(width: 250, height: 550).position(x: 170, y: 390)
            }
        }
        
    }
}

Answer 1

使用 NavigationView 和 NavigationLink 导航到另一个视图并从卡片视图中删除按钮。这是代码示例。

struct ContentView: View {
    var body: some View {
        NavigationView {
            VStack{
                ScrollView(.horizontal, showsIndicators: false) {
                    HStack{
                        ForEach(0..<10){i in
                            NavigationLink(destination: NextView()) {
                                cardView(img: "img\(i)").padding(10)
                            }
                        }
                        
                    }
                }
                
            }.background(Image("Apple_Background").resizable().aspectRatio(contentMode: .fill))
            
        }
    }
}

Answer 2

尝试这个，内容居中：

struct ContentView: View {
var body: some View {
    GeometryReader { geometry in
        ScrollView(.horizontal, showsIndicators: true) {
            HStack {
                FoEach(0..<4, id: (\.self)) { idx in
                Button {
                } label: {
                    Image(systemName: "applelogo")
                        .font(.largeTitle)
                        .padding(4)
                }
              }
            }
            .frame(width: geometry.size.width)
            .frame(height: geometry.size.height)
            .frame(alignment: .center)
        }
    }
    .frame(width: .infinity, height: 56, alignment: .center)
}

}