allowsHitTesting

SwiftUI 中 `allowsHitTesting` 的作用 #

allowsHitTesting 是一个 SwiftUI 的修饰符，用来控制视图是否可接收用户的触摸等交互事件。它可以用于启用、禁用某个 视图的用户点击或交互，而不会影响视图的展示。

语法 #

func allowsHitTesting(_ isEnabled: Bool) -> some View

参数：isEnabled：
- true：视图允许处理触摸事件（默认值）。
- false：视图不处理任何触摸事件，但视图仍然会显示。

功能特点 #

影响用户交互
- 当 allowsHitTesting(false) 时，用户无法与视图发生交互（如点击、拖拽等）。
- 该视图会被忽略，就像它从不响应输入事件一样，但它仍然会显示在界面上。
不影响子视图
- allowsHitTesting(false) 只会禁用应用在该 视图本身的用户交互，不会影响其子视图的交互能力。
区别于 disabled
- disabled(_:) 是禁用视图本身及其 子视图 的交互能力，但视觉上可能会显示为灰色。
- allowsHitTesting(false) 不会改变视图的外观，只禁用交互。

常见使用场景 #

1. 防止交互但仅保留显示 #

在某些情况下，视图需要显示但不允许用户直接与其交互，例如：

一些静态装饰性视图（背景视图、遮罩、不具备点击行为的部分）。
提示文本或图层在界面中不可交互的情况下依然显示。

2. 实现穿透点击 #

通过 allowsHitTesting(false)，可以实现将触摸事件“传递”到下层视图，而不是停留在当前视图。

3. 动态禁用用户交互 #

在某些动态场景（比如加载状态、动画过程中），可以暂时禁止交互事件。

示例：基本用法 #

1. 禁用用户交互（保持显示视图） #

在以下示例中，按钮显示正常，但由于 allowsHitTesting(false) 的设置，用户不能点击它。

struct ContentView: View {
    var body: some View {
        Button(action: {
            print("Button tapped!")
        }) {
            Text("I'm a Button")
                .padding()
                .background(Color.blue)
                .foregroundColor(.white)
                .cornerRadius(8)
        }
        .allowsHitTesting(false) // 禁用点击响应
    }
}

效果：

按钮显示正常，但不会响应任何点击事件。

2. 实现穿透点击事件 #

通过使用 allowsHitTesting(false)，触摸事件可以“穿透”到下层视图，而非先阻止在当前视图。

struct TransparentOverlayView: View {
    var body: some View {
        ZStack {
            // 底层的按钮
            Button(action: {
                print("Background button tapped!")
            }) {
                Text("Tap Me")
                    .padding()
                    .background(Color.green)
                    .foregroundColor(.white)
                    .cornerRadius(8)
            }

            // 上层的半透明视图
            Rectangle()
                .fill(Color.black.opacity(0.3)) // 半透明黑色遮罩
                .allowsHitTesting(false)       // 禁止交互，通过触摸
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color.gray)
    }
}

效果：

用户点击屏幕时，即使存在半透明遮罩，事件仍会传递给底层的按钮。
上层的 Rectangle 阻挡了视觉但不会拦截触摸事件。

3. 结合状态动态启用用户交互 #

在应用场景中，可以通过绑定 @State 属性，动态控制视图是否允许交互。

struct LoadingView: View {
    @State private var isLoading = false

    var body: some View {
        ZStack {
            Button("Tap Me") {
                print("Button tapped!")
            }
            .padding()
            .background(Color.blue)
            .foregroundColor(.white)
            .cornerRadius(8)
            .allowsHitTesting(!isLoading) // 禁用交互，仅当 isLoading 为 false 时

            if isLoading {
                // 加载中的全屏挡板
                Rectangle()
                    .fill(Color.black.opacity(0.5))
                    .ignoresSafeArea()
                    .overlay(
                        ProgressView("Loading...") // 加载动画
                            .padding()
                            .background(Color.white)
                            .cornerRadius(8)
                    )
            }
        }
        .onAppear {
            DispatchQueue.main.asyncAfter(deadline: .now() + 3) {
                isLoading = false // 模拟3秒后加载完成
            }
        }
    }
}

效果：

初始时按钮被遮挡且无响应（allowsHitTesting(false)）。
isLoading 状态改变后，按钮恢复允许交互。

4. 不影响子视图的交互 #

allowsHitTesting(false) 不会禁用内部的（子视图）的用户交互功能。

struct ParentChildInteractionView: View {
    var body: some View {
        VStack {
            // 父视图禁用交互
            VStack {
                Text("Parent is non-interactive")
                Button("Child Button") {
                    print("Child Button tapped!")
                }
            }
            .padding()
            .background(Color.pink)
            .allowsHitTesting(false) // 父视图禁用
            .cornerRadius(8)

            // 不受影响的另一个区域
            Button("I'm still tappable") {
                print("Another button tapped!")
            }
            .padding()
            .background(Color.blue)
            .foregroundColor(.white)
            .cornerRadius(8)
        }
    }
}

效果：

父容器的交互被禁用，但其子视图（“Child Button”）依然可以正常点击。
另一部分内容不受此约束。

5. `allowsHitTesting` 与 `disabled` 的区别 #

功能	`allowsHitTesting(false)`	`disabled(true)`
交互行为禁用	是（不响应用户交互）	是（禁用交互）
视觉效果变化	否，不改变视图的外观	是，通常用于控件（如按钮）时会变灰显示
对子视图的影响	不影响子视图	会同时禁用所有子视图的交互
触摸事件是否穿透	是，可穿透到下层视图	否，触摸会被拦截

6. 使用场景 #

屏蔽不必要的交互事件
- 例如，动画 loading 时，禁止用户点击界面。
- 在复杂 UI 中，某些装饰性视图无需交互时添加 allowsHitTesting(false)。
穿透点击
- 半透明遮罩（如弹出模态层时），允许其“穿透”到下层视图触发交互。
动态交互控制
- 在复杂逻辑场景下，通过动态控制 allowsHitTesting 实现切换交互状态，而无需真正移除视图。
保持松散父子交互
- 父视图交互被禁用，但子视图可以自主设置是否允许交互。

7. 总结 #

allowsHitTesting 是一个功能强大的修饰符，它可以：

禁用某个视图的交互，但不改变视图的外观；
实现交互事件的穿透，即响应底下的视图；
为动态逻辑提供简单的用户交互控制。

在需要精确控制交互事件且不想破坏视图结构或层级时，allowsHitTesting 是一个非常合适的工具。

SwiftUI 中 allowsHitTesting 的作用 #