如何在弹出子视图时禁用其外部的用户交互？

嘿，这个需求我之前也碰到过，给你分不同平台整理了几种靠谱的实现方式，你可以根据自己的项目技术栈来选：

UIKit 框架 #

• 遮罩拦截法：给弹出的子视图套一个全屏半透明遮罩，让遮罩拦截所有外部触摸事件，同时确保子视图在遮罩上方：

// 创建全屏遮罩视图
let dimBackground = UIView(frame: UIScreen.main.bounds)
dimBackground.backgroundColor = UIColor.black.withAlphaComponent(0.5)
// 可选：添加点击遮罩关闭子视图的手势
dimBackground.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(hideSubView)))
// 将遮罩添加到根视图
self.view.addSubview(dimBackground)

// 创建并添加子视图
let customSubView = YourCustomSubView()
customSubView.center = dimBackground.center
dimBackground.addSubview(customSubView)

// 若需要带动画，可给遮罩和子视图添加淡入效果
dimBackground.alpha = 0
UIView.animate(withDuration: 0.3) {
    dimBackground.alpha = 1
}

这个方法的好处是完全自定义，不管子视图是弹窗还是其他样式都适用

• 模态视图法：使用系统自带的present方法弹出子视图控制器，默认全屏模态会自动禁用背景交互；如果需要弹窗样式，可设置模态展示样式：

let subVC = YourSubViewController()
// 设置为全屏覆盖样式，背景会变暗且不可交互
subVC.modalPresentationStyle = .overFullScreen
subVC.modalTransitionStyle = .crossDissolve
self.present(subVC, animated: true)

SwiftUI 框架 #

• ZStack 遮罩法：通过堆叠层实现遮罩拦截，逻辑和UIKit类似，更符合SwiftUI的声明式风格：

struct AView: View {
    @State private var isSubViewShown = false
    
    var body: some View {
        ZStack {
            // 原A视图内容：按钮容器等
            VStack(spacing: 20) {
                Button("弹出子视图") {
                    isSubViewShown = true
                }
                // 其他按钮和界面元素
            }
            
            // 弹出状态下显示遮罩和子视图
            if isSubViewShown {
                // 全屏半透明遮罩，拦截外部交互
                Color.black.opacity(0.5)
                    .ignoresSafeArea()
                    .onTapGesture {
                        isSubViewShown = false // 点击遮罩关闭子视图
                    }
                
                // 自定义子视图
                YourSubView()
                    .frame(width: 320, height: 450)
                    .background(Color.white)
                    .cornerRadius(16)
                    .shadow(radius: 10)
            }
        }
    }
}

• fullScreenCover 法：系统自带的全屏覆盖视图，默认会完全禁用背景交互，适合需要全屏弹窗的场景：

struct AView: View {
    @State private var isSubViewShown = false
    
    var body: some View {
        Button("弹出子视图") {
            isSubViewShown = true
        }
        .fullScreenCover(isPresented: $isSubViewShown) {
            YourSubView()
        }
    }
}

• Dialog 弹窗法：系统Dialog默认会自动禁用外部交互，只需自定义布局即可实现需求：

// 创建自定义Dialog
val dialog = Dialog(context)
dialog.setContentView(R.layout.your_subview_layout)
// 可选：设置点击外部关闭弹窗
dialog.setCanceledOnTouchOutside(true)
// 去掉Dialog默认的背景边框
dialog.window?.setBackgroundDrawable(ColorDrawable(Color.TRANSPARENT))
// 展示弹窗
dialog.show()

如果需要禁止点击外部关闭，可设置dialog.setCancelable(false)

• 布局遮罩法：在主布局中添加全屏遮罩层，通过控制可见性实现弹窗效果：

<!-- 主布局文件 -->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- 原A视图内容：按钮容器等 -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <!-- 按钮和其他界面元素 -->
    </LinearLayout>

    <!-- 遮罩层与子视图，默认隐藏 -->
    <LinearLayout
        android:id="@+id/dim_mask_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#80000000"
        android:gravity="center"
        android:visibility="gone">

        <!-- 自定义子视图 -->
        <LinearLayout
            android:layout_width="300dp"
            android:layout_height="400dp"
            android:background="@color/white"
            android:orientation="vertical">
            <!-- 子视图内容 -->
        </LinearLayout>
    </LinearLayout>
</RelativeLayout>

代码中控制遮罩显示/隐藏：

val dimMask = findViewById<LinearLayout>(R.id.dim_mask_layout)

// 弹出子视图时
dimMask.visibility = View.VISIBLE
// 点击遮罩关闭子视图
dimMask.setOnClickListener {
    dimMask.visibility = View.GONE
}

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