SwiftUI中横竖屏模式下将标题和按钮固定在屏幕上下两端

一、修复横竖屏适配问题 #

你当前用固定高度的Spacer绑定屏幕高度，这种硬编码布局会在横竖屏切换时失效——屏幕宽高比变化后，固定比例的高度会超出可视范围。正确做法是利用SwiftUI的弹性布局系统，让视图自动适配尺寸：

1. 用无参数Spacer实现自适应
   移除所有带frame(height:)的固定高度Spacer，改用无参数的Spacer()，它会自动占据剩余空间，横竖屏切换时都能保持合理布局：

VStack(alignment: .leading, spacing: 20.0) {
    Spacer() // 自动填充顶部剩余空间
    
    Text("Instrument Tuner")
        .font(.largeTitle)
        .fontWeight(.bold)
        .foregroundColor(Color.red)

    Spacer() // 自动填充标题与按钮间的剩余空间
    
    Button("Start Tuning") {
        // DoSomeTuning
    }
    .buttonStyle(.borderedProminent)
    .tint(.red)
    .font(.largeTitle)

    Spacer() // 自动填充底部剩余空间
}

2. 用权重分配精准比例
   如果需要保持顶部/底部各占1/6、中间占2/3的比例，可通过layoutPriority给Spacer设置权重，横竖屏时比例会自动适配：

VStack(alignment: .leading, spacing: 20.0) {
    Spacer(minLength: 0).layoutPriority(1) // 权重1对应1/6
    
    Text("Instrument Tuner")
        .font(.largeTitle)
        .fontWeight(.bold)
        .foregroundColor(Color.red)

    Spacer(minLength: 0).layoutPriority(4) // 权重4对应2/3（总权重6，4/6=2/3）
    
    Button("Start Tuning") {
        // DoSomeTuning
    }
    .buttonStyle(.borderedProminent)
    .tint(.red)
    .font(.largeTitle)

    Spacer(minLength: 0).layoutPriority(1) // 权重1对应1/6
}

二、修复按钮居中问题 #

你使用alignmentGuide的方式有误，SwiftUI中让按钮居中更简单的方法有两种：

1. 让整个VStack内容居中
   调整VStack的alignment参数为.center，所有子视图会自动水平居中：

VStack(alignment: .center, spacing: 20.0) {
    // ... 其他视图
}

2. 仅让按钮单独居中
   如果希望其他视图保持左对齐，给按钮套一个HStack并在两侧加Spacer()：

HStack {
    Spacer()
    Button("Start Tuning") {
        // DoSomeTuning
    }
    .buttonStyle(.borderedProminent)
    .tint(.red)
    .font(.largeTitle)
    Spacer()
}

完整优化代码 #

var body: some View {
    ZStack {
        Image("XCTrack")
            .padding(20.0)
            .scaledToFit()
            .opacity(0.8)
  
        VStack(alignment: .leading, spacing: 20.0) {
            Spacer(minLength: 0).layoutPriority(1)
            
            Text("Instrument Tuner")
                .font(.largeTitle)
                .fontWeight(.bold)
                .foregroundColor(Color.red)

            Spacer(minLength: 0).layoutPriority(4)
            
            HStack {
                Spacer()
                Button("Start Tuning") {
                    // DoSomeTuning
                }
                .buttonStyle(.borderedProminent)
                .tint(.red)
                .font(.largeTitle)
                Spacer()
            }

            Spacer(minLength: 0).layoutPriority(1)
        }
        .padding() // 防止内容贴边
    }
}

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