如何在 SwiftUI 中设置 ScrollView 的 contentInset

Posted 2023-02-24

【中文标题】如何在 SwiftUI 中设置 ScrollView 的 contentInset

【英文标题】：How to set contentInset of a ScrollView in SwiftUI

【发布时间】：2020-06-29 13:38:34

【问题描述】：

我似乎找不到如何设置 ScrollView 的 contentInset。我的目标是在紫色主按钮上方创建 ScrollView 中的最后一个对象。

https://i.stack.imgur.com/QfjZb.jpg

如果有命令，有人可以帮助如何将它实现到我下面的当前代码中。非常感谢您的帮助！

struct Overview: View 
    var body: some View 
        
        NavigationView 
            
            ScrollView(showsIndicators: false) 
                VStack(spacing: 10) 
                    ForEach(0..<5) 
                        Text("Item \($0)")
                            .foregroundColor(.white)
                            .font(.largeTitle)
                            .frame(width: 340, height: 200)
                            .background(Color("Boxes"))
                            .cornerRadius(10)
                    
                
                .frame(maxWidth: .infinity)
            
            .navigationBarHidden(false)
            .navigationBarTitle("Overview", displayMode: .automatic)
        
    

【参考方案1】：

您可以在 ScrollView 内容下方放置一个不可见的视图，并为其设置底部填充。

例如 Color.clear 和底部填充 300。

struct Overview: View 
    var body: some View 
        
        NavigationView 
            
            ScrollView(showsIndicators: false) 
                VStack(spacing: 10) 
                    ForEach(0..<5) 
                        Text("Item \($0)")
                            .foregroundColor(.white)
                            .font(.largeTitle)
                            .frame(width: 340, height: 200)
                            .background(Color("Boxes"))
                            .cornerRadius(10)
                    

                    Color.clear.padding(.bottom, 300)
                
                .frame(maxWidth: .infinity)
            
            .navigationBarHidden(false)
            .navigationBarTitle("Overview", displayMode: .automatic)
        
    

【讨论】：

Spacer(minLength: 300) 在我看来比空的颜色更好

虽然这可行，但滚动条不会像使用插图那样自行调整。

这是一个 hack...不是真正的解决方案

【参考方案2】：

只需将padding 添加到嵌入在ScrollView 中的VStack。

使用嵌入堆栈的填充提供与内容插入相同的行为。

ScrollView(showsIndicators: false) 
    VStack(spacing: 10) 
        // Some content //
    
    .padding(.bottom, 200)    // Choose a value that works for you

【讨论】：

我认为这应该是公认的答案

这种方法的问题是，如果您使用模糊和视觉效果视图，内容将不会滚动到您在底部的内容之后。因此，当您向下滚动到文本输入区域下方时，您将失去在消息应用程序中看到的那种美妙效果。真的不知道如何实现这一点并维护您的滚动指示器。

alionthego 如果您使用ZStack 将visualEffectView 留在ScrollView 之上，那么这种方法应该没有问题。

Jorge Fries，滚动指示器确实有问题。

【参考方案3】：

ios 15 的 SwiftUI 现在有一个 safeAreaInset 修饰符。 它还可以正确调整滚动条。

ScrollView(.vertical, showsIndicators: true) 
    // scrollview's content

.safeAreaInset(edge: .bottom, spacing: 0) 
    // some bottom-sticked content, or just –
    Spacer()
        .frame(height: 44)

【参考方案4】：

在 iOS 15 中，我只是向 VStack 添加负填充。

struct Overview: View 
    var body: some View 
        
        NavigationView 
            
            ScrollView(showsIndicators: false) 
                VStack(spacing: 10) 
                    ForEach(0..<5) 
                        Text("Item \($0)")
                            .foregroundColor(.white)
                            .font(.largeTitle)
                            .frame(width: 340, height: 200)
                            .background(Color("Boxes"))
                            .cornerRadius(10)
                    
                    .padding(.top, -50)
                
                .frame(maxWidth: .infinity)
            
            .navigationBarHidden(false)
            .navigationBarTitle("Overview", displayMode: .automatic)