Show a badge on a Rectangle

Question

Created Feb ’22

Replies 2

Boosts 0

Views 1.9k

Participants 2

Hello guys, I want to show a badge on an object in SwiftUI, precisely I want the rectangle to show the badge on it every time I press it. I did some tests, but it isn't working. Can someone help me to build this? Here’s my code:

import SwiftUI
import PlaygroundSupport

struct ContentView: View {
    var body: some View {
        Button(action: {
            badge(9) 
        }, label: {
            Rectangle()
                .frame(width: 180, height: 200)
                .foregroundColor(.blue)
        })
    }
}


PlaygroundPage.current.setLiveView(ContentView())

Thanks a lot.

Boost

Answer 1

Claude31 OP

Feb ’22

Doc states that:

Badges are only displayed in list rows and iOS tab bars.

This works:

struct ContentView: View {
    
    func increment() {
        count = count + 1
    }
    @State var showBadge = false
    @State var count = 0
    
    var body: some View {
        Button(action: {
            showBadge.toggle() // badge(9)
            if showBadge { increment() }
        }, label: {
            Text("show badge")
        })
        List {
            if showBadge {
                Rectangle()
                    .frame(width: 180, height: 200)
                    .foregroundColor(.blue)
                    .badge(count)
            } else {
                Rectangle()
                    .frame(width: 180, height: 200)
                    .foregroundColor(.blue)
            }
        }
    }
}

0

Answer 2

Balvir-255 OP

Feb ’22

I tried it but it shows me only the number and I wanted the badge icon, so a circle with a number on it. I tried this but the circle is very big how can I set the dimension of the circle so that it looks like a badge?

struct ContentView: View { 

    func increment() {
        count = count + 1
    }

    @State var showBadge = false
    @State var count = 0

    var body: some View {
        Button(action: {
            showBadge.toggle() // badge(9)
            if showBadge { increment() }
        }, label: {
            Text("show badge")
        })
        if showBadge {
            Rectangle()
                .frame(width: 180, height: 200)
                .foregroundColor(.blue)
                .position(x: 70, y: 70)
                .badge(count)
                .overlay(
                    Circle(), alignment: .topLeading)
        } else {
            Rectangle()
                .frame(width: 180, height: 200)
                .foregroundColor(.blue)
        }}
}

0