基于SwiftUI开发的macOS应用工具栏项跳动闪烁问题求助

I’ve run into this exact toolbar flicker quirk with SwiftUI on macOS when working with NavigationView, and it’s definitely a frustrating issue that kills the app experience. Here are a few practical solutions that worked for me:

1. Anchor the Toolbar to the NavigationView Root #

Instead of attaching the toolbar to your detail view, move it directly to the top-level NavigationView container. This keeps the toolbar’s layout anchored rather than reinitializing it every time the detail view updates:

NavigationView {
    // Your navigation list + detail view hierarchy
    List(yourItems) { item in
        NavigationLink(destination: DetailView(item: item)) {
            Text(item.name)
        }
    }
    .toolbar {
        Spacer()
        Button(action: {}) {
            Image(systemName: "trash")
        }
        Button(action: {}) {
            Image(systemName: "heart")
        }
        Button(action: {}) {
            Image(systemName: "star")
        }
    }
}

2. Use ToolbarItemGroup with Explicit Placement #

Wrapping your toolbar items in ToolbarItemGroup with a defined placement gives SwiftUI clearer layout hints, reducing unnecessary reflows that cause flicker:

.toolbar {
    ToolbarItemGroup(placement: .primaryAction) {
        Spacer()
        Button(action: {}) {
            Image(systemName: "trash")
        }
        Button(action: {}) {
            Image(systemName: "heart")
        }
        Button(action: {}) {
            Image(systemName: "star")
        }
    }
}

3. Prevent Unnecessary View Reinitialization #

Make sure your detail view isn’t being fully recreated on navigation selection. Use @StateObject or @ObservedObject for view models instead of instantiating them inside the view—this cuts down on layout recalculations that can ripple up to the toolbar.

4. Fallback to AppKit Integration (Last Resort) #

If the above fixes don’t work, wrap an AppKit NSToolbar using NSViewRepresentable to bypass SwiftUI’s layout quirks. This gives you full control over the toolbar’s behavior:

struct CustomToolbar: NSViewRepresentable {
    func makeNSView(context: Context) -> NSToolbar {
        let toolbar = NSToolbar(identifier: "CustomToolbar")
        toolbar.delegate = context.coordinator
        toolbar.displayMode = .iconOnly
        return toolbar
    }
    
    func updateNSView(_ nsView: NSToolbar, context: Context) {}
    
    func makeCoordinator() -> Coordinator {
        Coordinator()
    }
    
    class Coordinator: NSObject, NSToolbarDelegate {
        func toolbar(_ toolbar: NSToolbar, itemForItemIdentifier itemIdentifier: NSToolbarItem.Identifier, willBeInsertedIntoToolbar flag: Bool) -> NSToolbarItem? {
            switch itemIdentifier {
            case .init("trash"):
                let item = NSToolbarItem(itemIdentifier: itemIdentifier)
                item.image = NSImage(systemSymbolName: "trash", accessibilityDescription: nil)
                item.action = #selector(onTrashTap)
                return item
            case .init("heart"):
                let item = NSToolbarItem(itemIdentifier: itemIdentifier)
                item.image = NSImage(systemSymbolName: "heart", accessibilityDescription: nil)
                item.action = #selector(onHeartTap)
                return item
            case .init("star"):
                let item = NSToolbarItem(itemIdentifier: itemIdentifier)
                item.image = NSImage(systemSymbolName: "star", accessibilityDescription: nil)
                item.action = #selector(onStarTap)
                return item
            default:
                return nil
            }
        }
        
        func toolbarDefaultItemIdentifiers(_ toolbar: NSToolbar) -> [NSToolbarItem.Identifier] {
            [.init("trash"), .init("heart"), .init("star")]
        }
        
        func toolbarAllowedItemIdentifiers(_ toolbar: NSToolbar) -> [NSToolbarItem.Identifier] {
            toolbarDefaultItemIdentifiers(toolbar)
        }
        
        @objc func onTrashTap() { /* Handle action */ }
        @objc func onHeartTap() { /* Handle action */ }
        @objc func onStarTap() { /* Handle action */ }
    }
}

Attach it to your root view like this:

NavigationView {
    // Your content
}
.toolbar {
    CustomToolbar()
}

Start with the first two solutions—they’re the most SwiftUI-native and require minimal code changes. The core issue here is SwiftUI recalculating the toolbar’s layout when the detail view updates, so anchoring the toolbar to a more stable part of the view hierarchy usually eliminates the flicker.

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