SwiftUI悬浮按钮菜单定位问题：如何实现屏幕居中弹出

核心问题分析 #

当前菜单与按钮位置重合，原因是你给菜单设置了.position(buttonPosition)，强制绑定了按钮的位置。要实现菜单相对屏幕居中，只需移除该绑定并调整动画逻辑即可。

修改后的代码 #

调整MainView的菜单布局与动画逻辑 #

struct MainView: View {
    @State var isShowing  = false
    @State private var menuScale: CGFloat = 0.1
    @State private var menuOpacity: Double = 0
    @State private var buttonPosition: CGPoint = CGPoint(x: 100, y: 100)

    var body: some View {
        ZStack {
            if isShowing {
                VStack {
                    ForEach(1..<4) { _ in
                        Text("something")
                    }
                    .frame(width: 150)
                    .padding()
                    .background(.white)
                    .clipShape(RoundedRectangle(cornerRadius: 16))
                }
                .scaleEffect(menuScale)
                .opacity(menuOpacity)
                // 移除.position(buttonPosition)，ZStack默认会让子视图居中
                .onChange(of: isShowing) { newValue in
                    withAnimation(.spring()) {
                        if newValue {
                            menuScale = 1.0
                            menuOpacity = 1.0
                        } else {
                            menuScale = 0.1
                            menuOpacity = 0.0
                        }
                    }
                }
            }

            AssistiveFloatingButton(buttonPosition: $buttonPosition) {
                isShowing.toggle()
            }
        }
        .background(.black)
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .ignoresSafeArea()
    }
}

关键修改点 #

• 移除菜单的.position(buttonPosition)：利用ZStack默认布局特性，让菜单自动居中显示，无需绑定按钮位置。
• 替换onAppear/onDisappear为onChange(of: isShowing)：统一处理菜单显示/隐藏的动画逻辑，修复原代码中关闭菜单时未重置动画参数的问题。
• 简化按钮点击逻辑：无需额外嵌套withAnimation，动画逻辑已在onChange中统一处理。

可选优化：添加菜单从按钮位置过渡到居中的动画 #

如果需要更自然的过渡效果（菜单从按钮位置弹出后移动到屏幕中央），可以结合GeometryReader实现位置插值动画：

struct MainView: View {
    @State var isShowing  = false
    @State private var menuScale: CGFloat = 0.1
    @State private var menuOpacity: Double = 0
    @State private var buttonPosition: CGPoint = CGPoint(x: 100, y: 100)
    @State private var menuPosition: CGPoint = .zero

    var body: some View {
        GeometryReader { geo in
            ZStack {
                if isShowing {
                    VStack {
                        ForEach(1..<4) { _ in
                            Text("something")
                        }
                        .frame(width: 150)
                        .padding()
                        .background(.white)
                        .clipShape(RoundedRectangle(cornerRadius: 16))
                    }
                    .scaleEffect(menuScale)
                    .opacity(menuOpacity)
                    .position(menuPosition)
                    .onChange(of: isShowing) { newValue in
                        withAnimation(.spring(response: 0.5)) {
                            if newValue {
                                // 初始位置设为按钮位置
                                menuPosition = buttonPosition
                                menuScale = 1.0
                                menuOpacity = 1.0
                                // 延迟触发居中动画
                                DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) {
                                    withAnimation(.spring()) {
                                        menuPosition = CGPoint(x: geo.size.width/2, y: geo.size.height/2)
                                    }
                                }
                            } else {
                                menuScale = 0.1
                                menuOpacity = 0.0
                            }
                        }
                    }
                }

                AssistiveFloatingButton(buttonPosition: $buttonPosition) {
                    isShowing.toggle()
                }
            }
            .background(.black)
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .ignoresSafeArea()
        }
    }
}

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