SwiftUI中Rectangle遮罩内弹窗交互元素无响应求助

问题分析 #

弹窗内的TextField、Button、Menu完全无法响应交互，核心原因有两点：

• 偏移导致点击区域错位：你分别给弹窗的Rectangle和overlay内容设置了offset(y: -UIScreen.main.bounds.width * 0.15)，但SwiftUI的offset仅改变视图视觉位置，不会同步调整点击测试区域，导致视觉上的交互元素实际可点击区域在屏幕下方，被底层全屏的VStack拦截。
• 冗余布局设置干扰：overlay内的内容重复设置了与Rectangle一致的frame、offset和clipShape，进一步打乱了点击区域的判定逻辑。

解决方案 #

1. 将弹窗的整体偏移应用到外层ZStack，确保点击区域与视觉位置匹配
2. 移除overlay内容中冗余的frame、offset、clipShape设置，让内容自动适配Rectangle的尺寸
3. 可选添加半透明背景遮罩，增强弹窗层级同时防止底层视图被误触

修改后的代码 #

主视图弹窗部分替换 #

//MARK: -Present add budget popup
if isCustomItemSelected {
    ZStack {
        // 可选：添加半透明背景遮罩，拦截底层点击
        Color.black.opacity(0.3)
            .edgesIgnoringSafeArea(.all)
            .opacity(animatePopUp ? 1.0 : 0.0)
        
        ZStack {
            Rectangle()
                .fill(Color.white)
                .cornerRadius(15.0)
                .frame(width: UIScreen.main.bounds.width / 1.195, height: UIScreen.main.bounds.height / 3.314)
                .opacity(animatePopUp ? 1.0 : 0.0)
                .scaleEffect(animatePopUp ? 1.0 : 0.85)
            
            VStack {
                VStack(spacing: 15.0) {
                    // Title
                    Text("add.budget.popup.title".localized)
                        .font(Font.custom(fonts.RobotoMedium, size: 16.0))
                        .foregroundColor(.black)
                        .multilineTextAlignment(.center)
                    
                    // Inputs
                    VStack(spacing: 10) {
                        budgetNameInput
                            .frame(width: UIScreen.main.bounds.width / 1.289, height: 52)
                        
                        budgetCurrencyMenu
                            .frame(width: UIScreen.main.bounds.width / 1.289, height: 52)
                    }
                    .frame(width: UIScreen.main.bounds.width / 1.273, height: 120)
                }
                .offset(y: 20)
                .frame(width: UIScreen.main.bounds.width / 1.273, height: 151)
                
                Spacer()
                
                // Buttons
                HStack {
                    AddBudgetButton(style: .cancel) {
                        // Cancel Button
                        print("Cancel")
                        withAnimation(.easeOut(duration: 0.4)) {
                            isCustomItemSelected = false
                        }
                    }
                    .frame(width: 76, height: 33)
                    .accessibility(label: Text("Cancel Button"))
                    
                    AddBudgetButton(style: .create) {
                        // Create Button
                        print("Create")
                    }
                    .frame(width: 76, height: 33)
                    .accessibility(label: Text("Create Button"))
                }
                .frame(width: UIScreen.main.bounds.width / 1.273, height: 33, alignment: .trailing)
                .offset(y: -15)
            }
            .opacity(animatePopUp ? 1.0 : 0.0)
            .scaleEffect(animatePopUp ? 1.0 : 0.85)
        }
        .offset(y: -UIScreen.main.bounds.width * 0.15) // 将偏移移到外层ZStack
    }
    .onAppear(perform: {
        withAnimation(.easeInOut(duration: 0.35)) {
            animatePopUp = true
        }
    })
}//: ADDBUDGETPOPUP

额外优化点 #

• 移除了所有冗余的.allowsHitTesting(true)设置，默认情况下交互元素已开启点击测试
• 将弹窗内容从Rectangle的overlay改为同级ZStack，布局逻辑更清晰
• 添加的半透明背景遮罩可以确保弹窗显示时，底层视图不会被误触

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