SwiftUI 文本徽章错误

Question

我在 SwiftUI 徽章中发现了一个错误，只要它是嵌套的，它就不会工作。 虽然这是测试版的新功能，但究竟是什么原因呢？为什么不能使用嵌套？ 如能解决将不胜感激。

以下代码之一是外层使用了徽章，另一种是外层没有使用徽章。结果是一个不显示正确的文本，另一个显示正确的文本。

Nesting effect Not nested

TabView {
    NavigationView {
        TextBadgeList()
    }
    .tabItem {
        Image(systemName: "rectangle.and.pencil.and.ellipsis")
    }
    .tag(1)
    .badge(99)
    
    NavigationView {
        TextBadgeList()
    }
    .tabItem {
        Image(systemName: "pencil.and.outline")
    }
    .tag(2)
}
.frame(height: 300)

文本徽章列表

List {
    Section {
        VStack {
            Text("wi-fi")
            Text("No")
        }
        .badge("LAN Solo")
        
        Text("wi-fi")
            .badge("LAN Solo")
        
        Text("wi-fi")
            .badge(900)
    }
}

Answer 1

这可能是一个错误。请报告给苹果

https://developer.apple.com/bug-reporting/

https://developer.apple.com/news/?id=vvrgkboh

---

这是一个工作区。

徽章仅在list rows 和iOS tab bars 中显示。如果在列表行中使用，它们会以辅助颜色显示为右对齐文本。

制作一个自定义ViewModifier 并在列表行中使用它。

struct CustomBudge: ViewModifier {
    let text: Text
    
    func body(content: Content) -> some View {
        HStack {
            content
            Spacer()
            text.foregroundColor(Color.secondary)
        }
    }
}


extension View {
    func customBudge(_ s: String) -> some View {
        self.modifier(CustomBudge(text: Text(s)))
    }
    
    func customBudge(_ number: Int) -> some View {
        self.modifier(CustomBudge(text: Text("\(number)")))
    }
    
    func customBudge(_ text: Text) -> some View {
        self.modifier(CustomBudge(text: text))
    }
}

像这样使用它

struct TextBadgeList2: View {
    var body: some View {
        List {
            Section {
                VStack {
                    Text("wi-fi")
                    Text("No")
                }
                .customBudge("LAN Solo")
                Text("wi-fi").customBudge("LAN Solo")
                
                Text("wi-fi").customBudge(900)
                
                Text("Text Budge ").customBudge(Text("test"))
            }.id(UUID())
        }
    }
}