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

【问题标题】：Adding 'badgeValue' to tab item in SwiftUI将 'badgeValue' 添加到 SwiftUI 中的选项卡项
【发布时间】：2021-10-18 04:47:09
【问题描述】：

我想知道是否可以在 swiftui 中将“badgeValue”添加到标签栏项目。

我尝试简单地在所需选项卡栏项目内的 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 :

【问题讨论】：

对我来说，它显示的是第一张图片，而不是第二张。
SwiftUI 3（需要 iOS 15）现在有一个 .badge 修饰符。 See this answer for an example.

标签： swiftui

【解决方案1】：

引用TabView：

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

如果您仍然想追求这一点，我会尝试在其他地方渲染它或使用预先生成的项目，也许是 11 个 prerendered 项目（1 到 10 和 10+ 的图像）并显示那些作为允许的单个 Image 的内容。

另一种选择是将其动态呈现为UIImage，将UIImage 放入图像槽中。您可能可以为此使用来自here 的徽章创建代码。

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

【讨论】：

如何在 swiftUI 上下文中使用动态呈现的 UIImage 方法？
那里有多种选择。您可以尝试使用UIHostingController 来显示视图并通过普通的 UIViewController 渲染方法进行渲染，或者您可以尝试普通的 UIView -> UIImage 渲染技术。我敢打赌还有更多选择。最简单的可能是要求某人为您创建预渲染图像，或使用一些免费的现有图像。弄清楚时间要少得多。
或者叠加两个 UIImage。
使用多个图像（或根本图像）的问题是，如果您使用内置的色调颜色属性，您将失去通知和图像本身之间的颜色对比。您必须做一些事情，例如使用清晰的颜色并为每个标签栏项目的不同状态选择/取消选择图像。
@eResourcesInc 是的。另一种方法是在 ZView 内的 TabView 顶部呈现图标，但您必须自己计算徽章的位置。

【解决方案2】：

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

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

【讨论】：