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

【问题标题】：SwiftUI View scrolls horizontal and vertical as well, instead of scrolling only verticallySwiftUI View 也可以水平和垂直滚动，而不是仅垂直滚动
【发布时间】：2021-06-03 16:29:57
【问题描述】：

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

我已经尝试了不同的方法，将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.：我是堆栈溢出的新手，所以如果违反任何规则，请告诉我:)

【问题讨论】：

ScrollViews默认是垂直的，去掉. vertical。
将 GeometryReader 大小设置为滚动视图。
为避免水平滚动，请将 ScrollView 的框架宽度设置为某个值，并确保子视图也具有该宽度。

标签： swift swiftui swiftui-scrollview

【解决方案1】：

您应该在 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)
            }
        }

我希望它会起作用:)

【讨论】：

【解决方案2】：

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

【讨论】：