Как добавить значок в ведущие элементы навигации в SwiftUI и iOS 14?

Question

Как добавить значок в SwiftUI и iOS 14?

ничего не могу найти в сети...

Я хочу, например, добавить значок над ведущим navigationBarItems:

      var body: some View {
    NavigationView {
        ZStack {
            VStack(spacing: 0) {
                Text("Peanut")
                    .padding(-10)
                    .navigationBarTitle(Text("HomeTitle"), displayMode: .inline)
                    .navigationBarItems(leading:
                        HStack {
                            NavigationLink(destination: Notifications()) {
                                Image(systemName: "bell")
                                    .font(.system(size: 20))
                            }.foregroundColor(.white)
                        }, trailing:
                        HStack {
                            NavigationLink(destination: Settings()) {
                                Image(systemName: "gearshape")
                                    .font(.system(size: 20))
                            }.foregroundColor(.white)
                        })
            }
        }
    }
}

Answer 1

Вы можете создать пользовательский BadgeПосмотреть:

      struct Badge: View {
    let count: Int

    var body: some View {
        ZStack(alignment: .topTrailing) {
            Color.clear
            Text(String(count))
                .font(.system(size: 16))
                .padding(5)
                .background(Color.red)
                .clipShape(Circle())
                // custom positioning in the top-right corner
                .alignmentGuide(.top) { $0[.bottom] }
                .alignmentGuide(.trailing) { $0[.trailing] - $0.width * 0.25 }
        }
    }
}

и использовать его как overlay:

      struct ContentView: View {
    var body: some View {
        NavigationView {
            ZStack {
                VStack(spacing: 0) {
                    Text("Peanut")
                        .padding(-10)
                        .navigationBarTitle(Text("HomeTitle"), displayMode: .inline)
                        .navigationBarItems(leading: leadingBarItems)
                }
            }
        }
    }

    var leadingBarItems: some View {
        NavigationLink(destination: Text("Notifications")) {
            Image(systemName: "bell")
                .font(.system(size: 20))
        }
        .foregroundColor(.primary)
        .padding(5)
        .overlay(Badge(count: 3))
    }
}

Примечание

Представление значка использует направляющие выравнивания для позиционирования. Для получения дополнительной информации см.:

• Руководства по выравниванию в SwiftUI

Answer 2

Вот еще один пример пользовательского значка

      struct BadgeViewModifier: ViewModifier {
    let text: String?
    
    func body(content: Content) -> some View {
        content
            .overlay(alignment: .topTrailing) {
                text.map { value in
                    Text(value)
                        .fixedSize(horizontal: true, vertical: false)
                        .font(.system(size: 14, weight: .semibold))
                        .foregroundColor(DS.Colors.white)
                        .padding(.horizontal, value.count == 1 ? 2 : 6)
                        .padding(.vertical, 2)
                        .background(
                            Capsule()
                                .fill(DS.Colors.red)
                                .if(value.count == 1) { $0.aspectRatio(1, contentMode: .fill) }
                        )
                }
            }
    }
}

extension View {
    func badge(value: String?) -> some View {
        modifier(BadgeViewModifier(text: value))
    }
    
    @ViewBuilder func `if`<Result: View>(_ condition: Bool, closure: @escaping (Self) -> Result) -> some View {
        if condition {
            closure(self)
        } else {
            self
        }
    }

}