如何在 SwiftUI 中设置 ScrollView 的 contentInset

Question

我似乎找不到如何设置 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 \([=10=])")
                            .foregroundColor(.white)
                            .font(.largeTitle)
                            .frame(width: 340, height: 200)
                            .background(Color("Boxes"))
                            .cornerRadius(10)
                    }
                }
                .frame(maxWidth: .infinity)
            }
            .navigationBarHidden(false)
            .navigationBarTitle("Overview", displayMode: .automatic)
        }
    }
}

Answer 1

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

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

struct Overview: View {
    var body: some View {
        
        NavigationView {
            
            ScrollView(showsIndicators: false) {
                VStack(spacing: 10) {
                    ForEach(0..<5) {
                        Text("Item \([=10=])")
                            .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)
        }
    }
}

Answer 2

只需在 ScrollView 中嵌入的 VStack 添加一个 padding。

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

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

Answer 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)
}

Answer 4

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

struct Overview: View {
    var body: some View {
        
        NavigationView {
            
            ScrollView(showsIndicators: false) {
                VStack(spacing: 10) {
                    ForEach(0..<5) {
                        Text("Item \([=10=])")
                            .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)
        }
    }
}

如何在 SwiftUI 中设置 ScrollView 的 contentInset

How to set contentInset of a ScrollView in SwiftUI

uiscrollview

swift

swiftui