SwiftUI自定义MenuButton：如何实现全屏遮罩与层级置顶菜单？

问题分析 #

1. 添加全屏遮罩后，MenuButton变为全屏尺寸，无法正常布局：原因是遮罩被放在MenuButton内部的ZStack中，导致整个容器被拉伸为全屏。
2. 遮罩只能覆盖下方视图：原因是遮罩的视图层级低于部分上层内容，无法实现全局覆盖。

解决思路 #

• 将遮罩逻辑从MenuButton内部移出，放到父视图的全局层级中，避免影响MenuButton的尺寸布局。
• 通过@Binding让父视图控制菜单的展开/收起状态，同时将遮罩置于父视图的底层ZStack中，确保遮罩覆盖所有底层内容，菜单按钮保持在遮罩上层。

修改后完整代码 #

struct MenuButton: View {
    @Binding var isExpanded: Bool
    let buttons: [String]
    
    let buttonSize: CGFloat = 60
    let itemButtonSize: CGFloat = 50
    
    var body: some View {
        ZStack {
            ForEach(buttons.indices, id: \.self) { index in
                VStack {
                    Image(systemName: buttons[index])
                        .frame(width: itemButtonSize, height: itemButtonSize)
                        .background(Color(.systemGray6))
                        .clipShape(Circle())
                }
                .offset(
                    x: 0,
                    y: isExpanded ? Double(index+1) * (-itemButtonSize - 20) : Double(index+1) * (-itemButtonSize + 20)
                )
                .opacity(isExpanded ? 1 : 0)
                .animation(isExpanded ? .spring(response: 0.2, dampingFraction: 0.5, blendDuration: 0).delay(Double(index) * 0.05) : .easeOut(duration: 0.2), value: isExpanded)
            }
            
            Button {
                withAnimation {
                    isExpanded.toggle()
                }
            } label: {
                Image(systemName: isExpanded ? "xmark" : "plus")
                    .frame(width: buttonSize, height: buttonSize)
                    .foregroundColor(.gray)
                    .background(Color(.systemGray6))
                    .clipShape(Circle())
            }
        }
    }
}

struct MenuView: View {
    @State private var isMenuExpanded = false
    
    var body: some View {
        ZStack {
            // 全屏遮罩：仅在菜单展开时显示，置于底层覆盖所有内容
            if isMenuExpanded {
                Color.black.opacity(0.2)
                    .edgesIgnoringSafeArea(.all)
                    .onTapGesture {
                        withAnimation {
                            isMenuExpanded = false
                        }
                    }
            }
            
            // 原有内容布局，位于遮罩上层
            VStack {
                Spacer()
                
                HStack {
                    Spacer()
                    
                    MenuButton(isExpanded: $isMenuExpanded, buttons: ["circle", "star", "bell"])
                        .padding()
                    
                }
                
                Text("Bottom")
            }
        }
    }
}

#Preview {
    MenuView()
}

关键说明 #

• MenuButton通过@Binding将展开状态委托给父视图MenuView管理，自身仅负责菜单按钮的布局和动画，保持原有自定义尺寸不受遮罩影响。
• 父视图使用ZStack将遮罩置于底层，菜单展开时遮罩覆盖全屏所有底层视图，菜单按钮和其他内容位于遮罩上层，不会被遮挡。
• 点击遮罩时触发动画关闭菜单，保持交互流畅性。

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