SwiftUI布局问题：如何保持蓝色方块居中并在下方剩余空间放菜单？

要实现蓝色方块居中、底部放置菜单且不影响方块位置的布局，最简洁的方式是使用ZStack分层布局，将蓝色方块作为底层居中元素，菜单作为上层底部元素叠加，两者布局互不干扰。

修改后的代码示例：

import SwiftUI

struct GameState: ObservableObject {}

struct Test: View {
    @StateObject private var gameState = GameState()
    
    var body: some View {
        ZStack(alignment: .bottom) {
            // 蓝色方块：占据整个屏幕空间并居中显示
            Rectangle()
                .fill(Color.blue)
                .aspectRatio(1, contentMode: .fit) // 保持正方形比例
                .frame(maxWidth: .infinity, maxHeight: .infinity)
                .ignoresSafeArea(.all)
            
            // 底部菜单：叠加在方块上方，固定在屏幕底部
            VStack(spacing: 16) {
                Text("菜单选项1")
                Text("菜单选项2")
                Text("菜单选项3")
            }
            .padding()
            .background(Color.white.opacity(0.8))
            .frame(maxWidth: .infinity)
        }
    }
}

#Preview {
    Test()
}

关键说明： #

• ZStack：通过分层布局，彻底避免VStack中元素互相挤压导致方块移位的问题，蓝色方块和菜单的位置逻辑完全独立。
• 蓝色方块通过.frame(maxWidth: .infinity, maxHeight: .infinity)占据全屏空间，配合.aspectRatio(1, contentMode: .fit)自动保持正方形并居中，不受其他元素影响。
• 菜单借助ZStack的alignment: .bottom固定在屏幕底部，可按需调整样式、添加安全区适配（如单独给菜单设置.ignoresSafeArea(.bottom)）。

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