SwiftUI View 也可以水平和垂直滚动，而不是仅垂直滚动

问题描述

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

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

关于项目： 视图包含在 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")
            }
        } 
    }
}

And here an Image of how it looks when scrolling.

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

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

解决方法

您应该在 ScrollView 中编写数组([.horizontal,.vertical]) 而不是 .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)
            }
        }

我希望它会起作用:)

,

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