SwiftUI中ScrollView自定义安全区域内内容无法点击的解决方法

我在App里用.safeAreaInset(edge: .bottom)放置了一个悬浮按钮，这样ScrollView会自动处理安全区域，允许额外滚动避免内容被遮挡，但发现一个问题：安全区域内的内容无法点击——比如示例里屏幕底部的按钮明明可见，却点不了。有没有修复方案或者替代实现方式？

import SwiftUI

struct ContentView: View {
    var body: some View {
        ScrollView {
            VStack {
                ForEach(Array(1...100), id: \.description) { i in
                    HStack {
                        Button(
                            action: {
                                print("\(i) clicked")
                            },
                            label: {
                                Text("Button \(i)")
                            }
                        )
                        Spacer()
                        Text("Description \(i)")
                    }
                    .frame(maxWidth: .infinity)
                }
            }
            .padding()
        }
        .safeAreaInset(edge: .bottom, alignment: .trailing) {
            Color.red.frame(width: 75, height: 75)
                .clipShape(Circle())
                .padding()
        }
    }
}

#Preview {
    ContentView()
}

修复方案 #

方法1：让安全区域视图允许点击穿透 #

.safeAreaInset添加的视图默认会拦截点击事件，给它加上.allowsHitTesting(false)，就能让点击穿透到底层ScrollView的内容上，同时保留原有的悬浮位置和ScrollView额外滚动特性。

修改后的代码：

import SwiftUI

struct ContentView: View {
    var body: some View {
        ScrollView {
            VStack {
                ForEach(Array(1...100), id: \.description) { i in
                    HStack {
                        Button(
                            action: {
                                print("\(i) clicked")
                            },
                            label: {
                                Text("Button \(i)")
                            }
                        )
                        Spacer()
                        Text("Description \(i)")
                    }
                    .frame(maxWidth: .infinity)
                }
            }
            .padding()
        }
        .safeAreaInset(edge: .bottom, alignment: .trailing) {
            Color.red.frame(width: 75, height: 75)
                .clipShape(Circle())
                .padding()
                .allowsHitTesting(false) // 添加这一行实现点击穿透
        }
    }
}

#Preview {
    ContentView()
}

方法2：用overlay替代.safeAreaInset #

如果不需要依赖ScrollView的安全区域自动滚动逻辑，可以直接用overlay把悬浮按钮放在ScrollView上层，同时手动给ScrollView内容添加底部内边距，避免内容被按钮遮挡：

import SwiftUI

struct ContentView: View {
    var body: some View {
        ScrollView {
            VStack {
                ForEach(Array(1...100), id: \.description) { i in
                    HStack {
                        Button(
                            action: {
                                print("\(i) clicked")
                            },
                            label: {
                                Text("Button \(i)")
                            }
                        )
                        Spacer()
                        Text("Description \(i)")
                    }
                    .frame(maxWidth: .infinity)
                }
            }
            .padding()
            .padding(.bottom, 95) // 手动适配按钮尺寸（75+20padding）
        }
        .overlay(alignment: .bottomTrailing) {
            Color.red.frame(width: 75, height: 75)
                .clipShape(Circle())
                .padding()
        }
    }
}

#Preview {
    ContentView()
}

方法3：悬浮按钮自身需要点击时的处理 #

如果悬浮按钮本身也要响应点击，不能直接关闭点击测试，可以拆成两层：底层用透明占位视图占住安全区域位置并允许点击穿透，上层用overlay放置真正的可点击按钮：

import SwiftUI

struct ContentView: View {
    var body: some View {
        ScrollView {
            VStack {
                ForEach(Array(1...100), id: \.description) { i in
                    HStack {
                        Button(
                            action: {
                                print("\(i) clicked")
                            },
                            label: {
                                Text("Button \(i)")
                            }
                        )
                        Spacer()
                        Text("Description \(i)")
                    }
                    .frame(maxWidth: .infinity)
                }
            }
            .padding()
        }
        .safeAreaInset(edge: .bottom, alignment: .trailing) {
            // 透明占位，保留安全区域滚动特性并允许点击穿透
            Color.clear.frame(width: 75, height: 75)
                .padding()
                .allowsHitTesting(false)
        }
        .overlay(alignment: .bottomTrailing) {
            // 可点击的悬浮按钮
            Button(action: {
                print("悬浮按钮被点击")
            }) {
                Color.red.frame(width: 75, height: 75)
                    .clipShape(Circle())
                    .padding()
            }
        }
    }
}

#Preview {
    ContentView()
}

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