将“badgeValue”添加到 SwiftUI 中的选项卡项目

Question

我想知道是否可以将“badgeValue”添加到 swiftui 中的选项卡栏项目。

我尝试简单地在所需选项卡栏项目内的 hstack 内的选项卡图像旁边添加一个圆形形状，但无济于事。

TabView {
    SomeView()
        .tabItem {
            VStack {
                HStack {
                    Image(systemName: "camera.viewfinder")
                    Image(systemName: "circle") // neither image appears
                }

                Text("View one")
            }
        }
        .tag(0)
}

我想以这样的方式结束：

Answer 1

引用TabView：

选项卡视图仅支持文本、图像或图像后跟文本类型的选项卡项目。传递任何其他类型的视图都会导致可见但空的选项卡项。

如果你仍然想追求这个，我会尝试在其他地方渲染它或使用预先生成的项目，也许是 11 个预渲染项目（1 到 10 以及 10+ 的图像）并将它们显示为单个 的内容图片允许。

另一种选择是将其动态渲染到

UIImage

中，将

UIImage

放入图像槽中。您可以使用此处中的徽章创建代码来实现此目的。

另一种选择是根据未读项目的数量显示数字图像，并希望用户能够理解什么是ment。

Answer 2

在 iOS 15 中，您可以使用本机徽章修改器：

TabView {
    SomeView()
        .tabItem {
            ....
        }
        .badge($unreadNotifications)
}