SwiftUI右上角按钮定位问题求助

你的V2版本布局思路是正确的，只需稍作调整让结构更简洁、适配性更好，以下是优化后的最终代码：

import Amplify
import Authenticator
import AWSCognitoAuthPlugin
import SwiftUI

@main
struct MyApp: App {
    init() {
        do {
            try Amplify.add(plugin: AWSCognitoAuthPlugin())
            try Amplify.configure()
        } catch {
            print("Unable to configure Amplify \(error)")
        }
    }
    
    var body: some Scene {
        WindowGroup {
            Authenticator(
                headerContent: {
                    Image("Final")
                        .resizable()
                        .scaledToFit()
                        .containerRelativeFrame(.horizontal) { size, axis in
                            size * 0.8
                        }
                },
                footerContent: {
                    Text("© 2024 The PATG Group, Inc. All Rights Reserved")
                        .font(.subheadline)
                }
            ) { _ in
                MainMenu()
            }
        }
    }
    
    struct MainMenu: View {
        var body: some View {
            ZStack(alignment: .center) {
                // 背景图：自动适配屏幕，无需手动指定尺寸
                Image("RangeCattle1")
                    .resizable()
                    .scaledToFill()
                    .ignoresSafeArea()
                
                // 右上角Logout按钮
                Button("Logout") {
                    // 执行登出逻辑
                    Task {
                        do {
                            try await Amplify.Auth.signOut()
                        } catch {
                            print("Sign out failed: \(error)")
                        }
                    }
                }
                .buttonStyle(.borderedProminent)
                .buttonBorderShape(.capsule)
                .tint(.red)
                .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topTrailing)
                .padding()
                
                // 中间的功能按钮组
                VStack(spacing: 40) {
                    Button("Management") {
                        // 跳转至Management页面
                    }
                    
                    Button("Calculator") {
                        // 跳转至Calculator页面
                    }
                }
                .buttonStyle(.borderedProminent)
                .buttonBorderShape(.capsule)
                .tint(.red)
                .font(.title)
            }
        }
    }

    #Preview {
        MainMenu()
    }
}

关键优化点说明： #

• 背景图处理：移除手动设置UIScreen.main.bounds的代码，改用.ignoresSafeArea()自动适配所有屏幕尺寸，避免不同设备上的布局异常。
• Logout按钮定位：直接将按钮放入ZStack，通过.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topTrailing)锚定右上角，配合.padding()避免按钮贴紧屏幕边缘。
• 功能按钮组：保持VStack垂直居中布局，通过spacing:40控制按钮间距，统一在VStack上应用按钮样式，减少重复代码。
• 登出逻辑补充：添加Amplify Auth异步登出代码，调用Amplify.Auth.signOut()即可完成登出操作。

内容的提问来源于stack exchange，提问作者Douglas W. Palme