Hi,
Overview
I have a Mac app with a settings window. When I add a button it is added to the center.
I want it on the trailing edge, I even tried adding it as confirmationAction but doesn’t work.
Screenshot
Feedback
FB21374186
Steps to reproduce
- Run the project on mac
- Open the app's settings by pressing ⌘ ,
- Notice that the Save button is in the center instead of the trailing edge
Code
App
import SwiftUI
@main
struct SettingsToolbarButtonBugApp: App {
var body: some Scene {
WindowGroup {
ContentView()
}
Settings {
SettingsView()
.frame(width: 300, height: 400)
}
}
}
SettingsView
import SwiftUI
struct SettingsView: View {
var body: some View {
NavigationStack {
Form {
Text("Settings window")
}
.toolbar {
ToolbarItem(placement: .confirmationAction) {
// Save button is the center instead of trailing edge
Button("Save") {}
}
}
.navigationTitle("Settings")
}
}
}
Thank you for filing the feedback, @newwbee. We responded to your feedback privately a while ago, but I want to include the response here, too, for anyone else that might have the same question and stumbles upon this.
SwiftUI’s Settings scene is designed to help you build a first-class Mac settings experience that follows Apple’s Human Interface Guidelines at https://developer.apple.com/design/human-interface-guidelines/settings#macOS
Toolbars within Settings scenes use a style appropriate for a typical macOS settings window, which displays centered tabs to group related settings. (Please refer to Settings windows in apps like Safari and Mail as an example.) People also typically expect macOS application settings to be applied as soon as the setting is changed, without the need for a “Save” button.
To create a bespoke settings experience for your app, you can use a regular Window scene, which uses a default toolbar style that you’d be familiar with in an application’s main and document windows. You will need to add your own Settings menu item, which you can do like so:
@main
struct YourApp: App {
@Environment(\.openWindow) private var openWindow
var body: some Scene {
WindowGroup {
ContentView()
}
Window("Settings", id: "settings") {
SettingsView()
.frame(width: 300, height: 400)
.windowResizeBehavior(.disabled)
.windowMinimizeBehavior(.disabled)
}
.windowResizability(.contentSize)
.commands {
CommandGroup(after: .appSettings) {
Button("Settings…", systemImage: "gear") {
openWindow("settings")
}
.keyboardShortcut(",")
}
}
}
}
