SwiftUI中如何将按钮固定在特定位置？

要实现遥控器图片上的精准交互按钮适配，核心是让按钮的位置和尺寸完全基于遥控器图片的实际渲染尺寸做相对计算，而非依赖外部全局几何数据。以下是修正后的实现方案：

关键调整点 #

• 用GeometryReader直接包裹遥控器图片和按钮，确保获取到图片的真实渲染尺寸
• 图片设置为.resizable().scaledToFit()，保证在任何设备上都保持原比例
• 所有按钮的尺寸、位置都基于GeometryReader提供的size做百分比计算，避免使用外部变量导致的偏移
• 调试时可将按钮透明度设为低数值（如0.2），确认位置正确后再改为0实现完全透明

修正后的代码 #

private func remoteControlView() -> some View {
    GeometryReader { geo in
        ZStack(alignment: .topLeading) {
            // 遥控器背景图片，按比例适配容器
            Image("remote_control") // 替换为你的图片资源名称
                .resizable()
                .scaledToFit()
                .frame(width: geo.size.width) // 占满容器宽度，高度自动按比例计算
            
            // DVD暂停按钮
            Button(action: {
                let generator = UIImpactFeedbackGenerator(style: .heavy)
                generator.impactOccurred()
                isDVDLogoPaused.toggle()
            }) {
                Rectangle()
                    .foregroundColor(.green)
                    .opacity(0.2) // 调试用，最终改为0实现透明
            }
            .frame(
                width: geo.size.width * 0.15,
                height: geo.size.height * 0.08
            )
            .position(
                x: geo.size.width * 0.158,
                y: geo.size.height * 0.13
            )
            
            // INFO按钮
            Button(action: {
                let generator = UIImpactFeedbackGenerator(style: .heavy)
                generator.impactOccurred()
                showFloatingIsland.toggle()
            }) {
                Rectangle()
                    .foregroundColor(.green)
                    .opacity(0.2) // 调试用，最终改为0实现透明
            }
            .frame(
                width: geo.size.width * 0.16,
                height: geo.size.height * 0.05
            )
            .position(
                x: geo.size.width * 0.675,
                y: geo.size.height * 0.077
            )
            
            // 数字时钟按钮
            Button(action: {
                let generator = UIImpactFeedbackGenerator(style: .heavy)
                generator.impactOccurred()
                showDigitalClock.toggle()
            }) {
                Rectangle()
                    .foregroundColor(.green)
                    .opacity(0.2) // 调试用，最终改为0实现透明
            }
            .frame(
                width: geo.size.width * 0.16,
                height: geo.size.height * 0.031
            )
            .position(
                x: geo.size.width * 0.310,
                y: geo.size.height * 0.095
            )
        }
    }
}

额外注意事项 #

• 确保遥控器图片本身比例固定，scaledToFit()会自动适配父视图宽度，高度按比例缩放
• 如需支持横竖屏切换，可添加@Environment(\.orientation)监听方向，针对不同方向调整按钮的相对位置参数
• 避免使用全局的remoteGeo变量，这类外部变量无法精准绑定图片的实时渲染尺寸，容易导致位置偏移

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