将 '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)
}

I want to end up with something like this :

Answer 1

引用TabView:

Tab views only support tab items of type Text, Image, or an image followed by text. Passing any other type of view results in a visible but empty tab item.

如果您仍想继续这样做，我会尝试在其他地方渲染它或使用预生成的项目，可能是 11 个 prerendered 项目（1 到 10 和 10 的图像+) 并将其显示为允许的单个 Image 的内容。

另一种选择是将其动态渲染到 UIImage 中，将 UIImage 放入图像槽中。为此，您或许可以使用 here 中的徽章创建代码。

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

Answer 2

在 iOS 15 中，您可以使用原生徽章修饰符：

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

将 'badgeValue' 添加到 SwiftUI 中的选项卡项

Adding 'badgeValue' to tab item in SwiftUI

swiftui