忽略安全区域导致SwiftUI按钮无法点击的问题排查

问题根源 #

该交互异常是由于ignoresSafeArea的多层级应用、NavigationStack的布局特性，叠加键盘唤起后视图坐标空间变化，导致红色页面的点击检测区域（hit test）失效；而拖拽切换时的动画刷新会临时触发视图重绘，因此按钮会恢复可点击状态。

修复方案（无需移除ignoresSafeArea） #

以下两种方案均可保留你所需的布局设置，同时解决按钮无法点击的问题：

方案1：强制设置红色页面的交互区域

在红色页面的ZStack中添加.contentShape(Rectangle())，让SwiftUI识别整个页面区域为可交互范围：

//PAGE 2 WITH DEFECT
NavigationStack {
    ZStack {
        Color.red
        Button(action: {
            print("Button tapped")
        }, label: {
            Text("Button").font(.title)
        })
    }
    .ignoresSafeArea()
    .contentShape(Rectangle()) // 添加此行
}
.frame(width: widthOrHeight(width: true))
.ignoresSafeArea()

方案2：切回红色页面时强制刷新视图

通过给红色页面的NavigationStack绑定动态id，切换回红色页时重置id触发视图重绘，彻底修复布局冲突：

1. 添加状态变量：

@State private var redPageRefreshId = UUID()

2. 给红色页面的NavigationStack绑定id：

NavigationStack {
    // 原有内容保持不变
}
.frame(width: widthOrHeight(width: true))
.ignoresSafeArea()
.id(redPageRefreshId) // 添加此行

3. 在拖拽结束切回红色页的逻辑中更新id：

// 从其他页面切回红色页的分支中
withAnimation(.easeInOut(duration: 0.15)){
    offset = 0
    scale = 0.7
    redPageRefreshId = UUID() // 添加此行
}
lastStoredOffset = 0
option = 2

效果验证 #

两种方案均无需修改你要求保留的ignoresSafeArea和NavigationStack层级设置，方案1更轻量，方案2通过重置视图彻底解决布局异常。

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