SwiftUI应用从后台返回后顶部触摸事件失效问题求助

问题现象与复现步骤 #

• 点击蓝色栏触发onTapGesture打开模态视图
• 上滑返回主屏幕，将应用退至后台
• 重新打开应用
• 下拉关闭模态视图
• 再次点击蓝色栏，触摸事件无响应

注：移除Color.red.ignoresSafeArea()后功能恢复正常，且iOS 15下无此问题

问题分析 #

这是SwiftUI在iOS 16及以上版本的一个布局层级Bug。当带有ignoresSafeArea()的背景视图与模态视图（sheet）交互后，应用从后台返回再关闭sheet，视图的触摸响应层级会出现错乱——底层的红色背景视图会意外抢占顶部蓝色栏的触摸区域，导致手势无法被正确触发。

可行解决办法 #

办法1：提升蓝色栏的触摸优先级 #

给蓝色栏添加zIndex修饰符，确保其触摸响应层级高于背景视图：

public struct TestView: View {
    @State private var showModal = false

    public var body: some View {
        ZStack {
            Color.red.ignoresSafeArea()
            
            VStack(spacing: 0) {
                Color.blue
                    .frame(height: 20)
                    .zIndex(1) // 提升触摸优先级
                    .onTapGesture {
                        showModal = true
                    }
                Color.white
            }
        }
        .sheet(isPresented: $showModal, content: {
            Text("HELLO")
        })
    }
}

办法2：改用background修饰符设置背景 #

避免使用ZStack嵌套背景视图，改用background修饰符，这样背景不会参与触摸响应层级的竞争：

public struct TestView: View {
    @State private var showModal = false

    public var body: some View {
        VStack(spacing: 0) {
            Color.blue
                .frame(height: 20)
                .onTapGesture {
                    showModal = true
                }
            Color.white
        }
        .background(Color.red.ignoresSafeArea()) // 用background替代ZStack底层视图
        .sheet(isPresented: $showModal, content: {
            Text("HELLO")
        })
    }
}

办法3：sheet关闭后强制刷新视图 #

通过监听showModal状态，在sheet关闭时强制视图重新渲染，修复层级错乱：

public struct TestView: View {
    @State private var showModal = false
    @State private var viewId = UUID()

    public var body: some View {
        ZStack {
            Color.red.ignoresSafeArea()
            
            VStack(spacing: 0) {
                Color.blue
                    .frame(height: 20)
                    .onTapGesture {
                        showModal = true
                    }
                Color.white
            }
        }
        .id(viewId) // 通过id刷新视图
        .sheet(isPresented: $showModal, onDismiss: {
            viewId = UUID() // sheet关闭时重置id，触发视图重绘
        }, content: {
            Text("HELLO")
        })
    }
}

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