如何禁止水平滚动组中的垂直滚动？

Question

这是我使用 SwiftUI 的第一个项目，所以请原谅我的无知。下面我有一个内容视图，我在 for-each 循环中为它创建了三个滚动组，让用户水平滚动内容，例如在 Spotify 或 Apple Music 中选择多个播放列表。但无论出于何种原因，我创建的第一组和第三组视图都允许您垂直滚动，如下面的视频所示。 有什么办法可以明确禁止在 SwiftUI 中的 HStack 中垂直滚动（因此，如果用户向上或向下滚动堆栈中的视图也不会移动，中间的那个就完美了不允许用户仅水平垂直滚动。请注意，我没有更多的 Swift 文件，而 app.swift 只是默认布局。下图显示了在滚动组上向上拖动时 UI 的外观，下面的文本和图像根据用户拖动的内容向上或向下移动，下面的没有这个问题，但下面的有

import SwiftUI

struct ContentView: View {
    
    var body: some View {
        
        ZStack {
            Color(red: 0.16, green: 0.16, blue: 0.16).ignoresSafeArea()
            
            ScrollView {
                
                HStack(alignment: .center) {
                    
                    Image("SeeArt.")
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                        .frame(width: 125, height: 50)
                        .padding(.leading, 15)
                    
                    Spacer()
                    
                    Image("Search Icon")
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                        .frame(width: 40, height: 40)
                }
                
                .padding()
                
                HStack(alignment: .center) {
                    
                    Text("Featured Artists")
                        .font(.title2)
                        .bold()
                        .foregroundColor(.white)
                        .padding()
                }
                
                VStack {
                    
                    HStack(alignment: .top, spacing: 20) {
                        
                        Image("Andy Warhol Explore Page")
                            .resizable()
                            .aspectRatio(contentMode: .fit)
                            .frame(width: 175, height: 175)
                            .padding(.leading, 15)
                        
                        Image("Jean Michel Basquiat Explore Page")
                            .resizable()
                            .aspectRatio(contentMode: .fit)
                            .frame(width: 175, height: 175)
                            .padding(.trailing, 15)
                    }
                    
                    Spacer()
                        
                        .frame(height: 20)
                    
                    HStack(alignment: .top, spacing: 20) {
                        
                        Image("Roy Lichtenstien Explore Page")
                            .resizable()
                            .aspectRatio(contentMode: .fit)
                            .frame(width: 175, height: 175)
                            .padding(.leading, 15)
                        
                        Image("Keith Haring Explore Page")
                            .resizable()
                            .aspectRatio(contentMode: .fit)
                            .frame(width: 175, height: 175)
                            .padding(.trailing, 15)
                    }
                }
                
                Text("Monthly Picks")
                    .font(.title2)
                    .bold()
                    .foregroundColor(.white)
                    .padding()
                    .frame(maxWidth: .infinity, alignment: .leading)
                
                let monthlyPicksNames = ["Nakamura Keith Haring Collection", "Tate Modern", "The Broad Museum", "Museum für Moderne Kunst"]
                
                ScrollView(.horizontal, showsIndicators: false) {
                    
                    HStack(alignment: .top, spacing: 0) {
                        
                        ForEach(monthlyPicksNames.indices) { index in
                            
                            VStack {
                                
                                Image(monthlyPicksNames[index])
                                    .resizable()
                                    .frame(width: 120, height: 120)
                                    .padding(.leading, 15)
                                    .cornerRadius(5)
                                
                                Text(monthlyPicksNames[index])
                                    .bold()
                                    .font(.callout)
                                    .foregroundColor(.white)
                                    .multilineTextAlignment(.center)
                                    .padding(.leading, 15)
                                    .frame(width: 150)
                            }
                        }
                    }
                }
                
                Text("Quarterly Portfolio")
                    .font(.title2)
                    .bold()
                    .foregroundColor(.white)
                    .padding()
                    .frame(maxWidth: .infinity, alignment: .leading)
                
                Image("Quaterly Portfolio 1")
                
                let museumNames = ["Whitney Museum of Art", "The Andy Warhol Museum", "Museum of Modern Art", "Nakamura Keith Haring Collection", "Tate Modern", "The Broad Museum", "Museum für Moderne Kunst", "MACBA"]
                
                let showMeSomething = ["Nakamura Keith Haring Collection", "Tate Modern", "The Broad Museum", "Museum für Moderne Kunst", "Whitney Museum of Art"]
                
                let handpickedStories = ["Nakamura Keith Haring Collection", "Tate Modern", "The Broad Museum", "Museum für Moderne Kunst", "Whitney Museum of Art"]
                
                let text = ["Exhibitions and Museums", "Show me Something", "Handpicked Stories"]
                
                ForEach(0..<3) { index in
                    
                    Text(text[index])
                        .font(.title2)
                        .bold()
                        .foregroundColor(.white)
                        .padding()
                        .frame(maxWidth: .infinity, alignment: .leading)
                    
                    ScrollView(.horizontal, showsIndicators: false) {
                        HStack(alignment: .top, spacing: 0) {
                            
                            if (index == 0) {
                                
                                ForEach(museumNames.indices) { index in
                                    
                                    VStack {
                                        
                                        Image(museumNames[index])
                                            .resizable()
                                            .frame(width: 120, height: 120)
                                            .padding(.leading, 15)
                                        
                                        Text(museumNames[index])
                                            .bold()
                                            .font(.callout)
                                            .foregroundColor(.white)
                                            .multilineTextAlignment(.center)
                                            .padding(.leading, 15)
                                            .frame(width: 150)
                                    }
                                }
                            }
                            
                            if (index == 1) {
                                
                                ForEach(showMeSomething.indices) { index in
                                    
                                    VStack {
                                        
                                        Image(showMeSomething[index])
                                            .resizable()
                                            .frame(width: 120, height: 120)
                                            .padding(.leading, 15)
                                        
                                        Text(showMeSomething[index])
                                            .bold()
                                            .font(.callout)
                                            .foregroundColor(.white)
                                            .multilineTextAlignment(.center)
                                            .padding(.leading, 15)
                                            .frame(width: 150)
                                    }
                                }
                            }
                            
                            if (index == 2) {
                                
                                ForEach(handpickedStories.indices) { index in
                                    
                                    VStack {
                                        
                                        Image(handpickedStories[index])
                                            .resizable()
                                            .frame(width: 120, height: 120)
                                            .padding(.leading, 15)
                                        
                                        Text(handpickedStories[index])
                                            .bold()
                                            .font(.callout)
                                            .foregroundColor(.white)
                                            .multilineTextAlignment(.center)
                                            .padding(.leading, 15)
                                            .frame(width: 150)
                                    }
                                }
                            }
                            
                            
                        }
                    }
                }
            }
        }
    }
}

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