SwiftUI中如何设置ScrollView的contentInset，让最后元素避开底部按钮？

嘿，我来帮你搞定这个ScrollView的contentInset设置需求！你想要让ScrollView里的最后一个元素停在底部紫色主按钮的上方，其实只需要给ScrollView添加合适的底部内边距就行，具体实现如下：

核心思路 #

我们需要用contentInset给ScrollView的内容底部增加额外空间，这个空间的大小等于你的紫色按钮高度，再加上你想要的元素和按钮之间的间距。如果按钮是贴合设备底部安全区域的，还可以动态适配安全区域的内边距，避免在不同设备上出现遮挡问题。

修改后的完整代码 #

struct Overview: View {
    // 这里可以根据你的紫色按钮高度+间距来调整数值，比如按钮高60+间距20=80
    private let bottomPadding: CGFloat = 80
    
    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)
            }
            // 设置contentInset，让内容底部留出足够空间
            .contentInset(EdgeInsets(top: 0, leading: 0, bottom: bottomPadding, trailing: 0))
            .navigationBarHidden(false)
            .navigationBarTitle("Overview", displayMode: .automatic)
        }
    }
}

进阶适配（动态安全区域） #

如果你的紫色按钮是放在设备底部安全区域内的，推荐用GeometryReader动态获取安全区域的底部内边距，这样能适配iPhone、iPad等不同设备：

struct Overview: View {
    // 按钮高度，根据你的实际按钮调整
    private let buttonHeight: CGFloat = 60
    // 元素和按钮之间的间距
    private let itemButtonSpacing: CGFloat = 20
    
    var body: some View {
        NavigationView {
            GeometryReader { geo in
                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)
                }
                // 动态计算底部内边距：按钮高度+间距+安全区域底部值
                .contentInset(EdgeInsets(
                    top: 0,
                    leading: 0,
                    bottom: buttonHeight + itemButtonSpacing + geo.safeAreaInsets.bottom,
                    trailing: 0
                ))
            }
            .navigationBarHidden(false)
            .navigationBarTitle("Overview", displayMode: .automatic)
        }
    }
}

小提示 #

你只需要根据自己的紫色按钮实际高度和想要的间距，修改对应的数值就行。设置好contentInset后，ScrollView滚动时最后一个元素就会停在按钮上方的位置啦～

内容的提问来源于stack exchange，提问作者Gigabite