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

【问题标题】：How to add badges to bottom bar buttons in SwiftUI?如何在 SwiftUI 的底部栏按钮上添加徽章？
【发布时间】：2022-07-12 23:50:03
【问题描述】：

我有一个底部栏，里面有按钮。我在向按钮添加徽章时遇到问题，并尝试使用本机 .badges 修饰符，但没有效果。

这就是我正在尝试的：

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")
                        }
                    }
                }
            }
        }
    }
}

这就是它的样子：

有没有办法在 SwiftUI 中实现这一点？

【问题讨论】：

您使用了错误的酒吧类型。你应该使用TabBar 而不是ToolBar。
谢谢，但实际上我不想专门使用工具栏而不是标签来进行此设计。
badge 修饰符状态的文档 “徽章仅显示在列表行和 iOS 选项卡栏中”。工具栏不是标签栏

标签： swiftui

【解决方案1】：

一种可能的方法是以自定义方式执行此操作（因为工具栏只接受一个视图），所以它可能像

使用 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)
    .offset(x: 10, y: -10)
         // ^^^^ just for demo simplicity, can be somehow dynamic
)

【讨论】：