SwiftUI 视图同时水平和垂直滚动，而不是仅垂直滚动

Question

我正在构建一个应用程序作为学习项目。 我遇到了一个问题，我的一个标签无缘无故地垂直和水平滚动。 安全区域之外没有内容，我想不出它横向滚动的原因。

我已经尝试了不同的东西，用VStack替换GeometryReader ，指定我希望它是一个垂直的ScrollView 。 将.clipped添加到视图的末尾以及删除或替换其他几个视图但没有任何效果。

关于项目： View 包含在TabView和NavigationView中。 所有其他选项卡都以相同的方式包装，其中一个也使用ScrollView ，但没有这个问题。

主要代码：

struct InformationView: View {
    
    @EnvironmentObject var model: ViewModel
    
    var radialColor1 = Color.init(red: 225/255, green: 210/255, blue: 164/255)
    var radialColor2 = Color.init(red: 233/255, green: 222/255, blue: 188/255)
    
    var isShowingWarning = true
    
    var body: some View {
        
        GeometryReader  { geo in
            ScrollView(.vertical) {
                
                VStack(alignment: .leading) {
                    
                    Text("Here is a Text")
                        .padding(.vertical)
                    
                    // W-fragen Stack
                    W_FragenCardView()
                    
                    Text("Here is another Text")
                        .padding(.vertical)
                    
                    Text("Kontakt:")
                        .font(.title3)
                        .bold()
                    
                    ContactView()
                    
                }
                .padding(.horizontal)
                
                if isShowingWarning {
                    ZStack {
                        Rectangle()
                            .foregroundColor(Color.customRed())
                        
                        Text("Here is a third Text")
                            .minimumScaleFactor(0.1)
                            .lineLimit(10)
                            .padding()
                    }
                    .frame(height: geo.size.height/5)
                    // .frame(height: 100)
                }
                
                Text("Current Theme: \(model.themes[1]!)")
                
            }
            
        }
        .navigationBarTitle("Informationen", displayMode: .automatic)
    }
}

这是它的包装：

struct ContentView: View {
    
    @EnvironmentObject var model: ViewModel
    
    var body: some View {
        
        
        TabView {

            NavigationView {
                AnmeldungsView()
            }
            .tabItem {
                
                Image(systemName: "square.and.pencil")
                Text("Anmelden")
            }
            
            NavigationView {
                FotosView()
            }
            .tabItem {
                
                Image(systemName: "photo.fill.on.rectangle.fill")
                Text("Fotos")
            }
            
            
            NavigationView {
                InformationView()
            }
            .tabItem {
                
                Image(systemName: "info.circle")
                Text("Informationen")
            }
        } 
    }
}

这里是滚动时外观的图像。

我希望这足以理解我的问题。 非常感谢任何帮助或想法。

PS：我是堆栈溢出的新手，所以如果违反任何规则，请告诉我:)

Answer 1

您应该在 ScrollView 而不是.vertical中编写一个数组([.horizontal, .vertical]) 。 将您的代码更改为：

 GeometryReader  { geo in
        ScrollView([.horizontal, .vertical]) {
            
            VStack(alignment: .leading) {
                
                Text("Here is a Text")
                    .padding(.vertical)
                
                W_FragenCardView()
                
                Text("Here is another Text")
                    .padding(.vertical)
                
                Text("Kontakt:")
                    .font(.title3)
                    .bold()
                
                ContactView()
                
            }
            .padding(.horizontal)
            
            if isShowingWarning {
                ZStack {
                    Rectangle()
                        .foregroundColor(Color.red)
                    
                    Text("Here is a third Text")
                        .minimumScaleFactor(0.1)
                        .lineLimit(10)
                        .padding()
                }
                .frame(height: geo.size.height/5)
                // .frame(height: 100)
            }
        }

我希望它会起作用:)

Answer 2

这是geo.size.height/5和navigationBarTitle在displayMode: .automatic .automatic 之间的问题。 这导致可用高度发生变化并以某种方式被窃听。 要么将displayMode:更改为.inline或.large ，要么用硬编码的 Int 替换geo.size.height/5 ，我使用150 。