SwiftUI中如何使Save按钮与返回按钮保持同一高度对齐

以下是几种可行的解决办法，亲测能让右侧Save按钮和左侧返回按钮高度对齐，同时保留原有navigationTitle：

1. 自定义按钮样式强制统一高度 #

系统默认按钮的内边距、高度可能存在差异，通过自定义ButtonStyle固定按钮尺寸，确保和返回按钮高度匹配：

struct NavBarAlignedButtonStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .frame(height: 32) // 匹配系统返回按钮高度，可根据实际界面微调
            .padding(.horizontal, 16)
            .background(configuration.isPressed ? Color.gray.opacity(0.2) : Color.clear)
            .cornerRadius(8)
            .font(.subheadline) // 和系统返回按钮字体保持一致
    }
}

// 页面中使用
struct EditView: View {
    var body: some View {
        NavigationStack {
            Text("编辑内容区域")
                .navigationTitle("编辑项目")
                .toolbar {
                    ToolbarItem(placement: .navigationBarTrailing) {
                        Button("Save") {
                            // 执行保存逻辑
                        }
                        .buttonStyle(NavBarAlignedButtonStyle())
                    }
                }
        }
    }
}

2. 直接调整按钮Frame与对齐方式 #

如果不想自定义样式，也可以直接给Save按钮设置固定高度，并通过对齐指南对齐：

struct EditView: View {
    var body: some View {
        NavigationStack {
            Text("编辑内容区域")
                .navigationTitle("编辑项目")
                .toolbar {
                    ToolbarItem(placement: .navigationBarTrailing) {
                        Button("Save") {
                            // 执行保存逻辑
                        }
                        .frame(height: 32)
                        .font(.subheadline)
                        .alignmentGuide(.top) { _ in 0 } // 对齐到导航栏顶部基准线
                    }
                }
        }
    }
}

3. 适配NavigationView（iOS 13-15） #

如果仍在使用旧版NavigationView，只需把NavigationStack替换为NavigationView即可，上述两种方法同样适用：

struct EditView: View {
    var body: some View {
        NavigationView {
            Text("编辑内容区域")
                .navigationTitle("编辑项目")
                .toolbar {
                    ToolbarItem(placement: .navigationBarTrailing) {
                        Button("Save") {
                            // 执行保存逻辑
                        }
                        .buttonStyle(NavBarAlignedButtonStyle())
                    }
                }
        }
    }
}

注意事项 #

• 若按钮包含图标，需确保图标尺寸和系统返回按钮的箭头图标尺寸一致（一般为20x20）
• 不同iOS版本的系统导航栏按钮高度可能略有差异，可根据实际截图微调frame(height:)的数值

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