如何在 SwiftUI 的底部栏按钮上添加徽章？

Question

I have a bottom bar with buttons in it. I'm having trouble adding badges to the buttons and tried using the native .badges modifier but had no effect.

This is what I'm trying:

struct ContentView: View {
    var body: some View {
        NavigationView {
            VStack {
                Text("Test")
            }
            .padding()
            .toolbar {
                ToolbarItemGroup(placement: .bottomBar) {
                    ControlGroup {
                        Button(action: {}) {
                            Label("Button 1", systemImage: "doc")
                                .badge(1)
                        }
                        Button(action: {}) {
                            Label("Button 2", systemImage: "checkmark")
                        }
                        .badge(2)
                        Button(action: {}) {
                            Label("Button 3", systemImage: "person")
                        }
                    }
                }
            }
        }
    }
}

This is what it looks like:

Is there a way to achieve this in SwiftUI?

Answer 1

Documentation of badge modifier states "Badges are only displayed in list rows and iOS tab bars" . Toolbar is not a Tabbar.

A possible approach is to do that in custom way (because toolbar accepts just a view), so it could be like

Tested with Xcode 13.4 / iOS 15.5

ControlGroup {
    Button(action: {}) {
        Label("Button 1", systemImage: "doc")
    }
    Button(action: {}) {
        Label("Button 2", systemImage: "checkmark")
    }
    Button(action: {}) {
        Label("Button 3", systemImage: "person")
    }
}
.overlay(HStack(alignment: .top) {            // << here !!
    Image(systemName: "1").foregroundColor(.green)
        .frame(maxWidth: .infinity)
    Image(systemName: "3").foregroundColor(.orange)
        .frame(maxWidth: .infinity)
    Image(systemName: "9").foregroundColor(.purple)
        .frame(maxWidth: .infinity)
    }
    .frame(maxHeight: .infinity)
    .symbolVariant(.fill)
    .symbolVariant(.circle)
    .allowsHitTesting(false)
    .offset(x: 10, y: -10)
         // ^^^^ just for demo simplicity, can be somehow dynamic
)

Test code on GitHub