SwiftUI tab view with Shopping cart

Question

I have the view in swiftUI. I have the list of tab view . Here what I'm trying to do . when I click the add to cart button, I am expecting the cart value to increase and it working fine but the problem is the count is displaying at bottom of the tab view, I want it at top of the cart view like in preview , it show correctly.

Here is the Main view ..

import SwiftUI

struct MainView: View {

   @EnvironmentObject var  order: Order

    var body: some View {
        TabView {
            
            OrderView()
                .tabItem {
                    CartButton(numberOfProducts: order.product.count)
                }
        }
    }
}

Here is the Cart button View ..

import SwiftUI

struct CartButton: View {
    var numberOfProducts: Int

    var body: some View {
        ZStack(alignment: .topTrailing) {
            Image(systemName: "cart")
                .padding(.top, 5)

            if numberOfProducts > 0 {
                Text("\(numberOfProducts)")
                    .font(.caption2).bold()
                    .foregroundColor(.white)
                    .frame(width: 15, height: 15)
                    .background(Color(hue: 1.0, saturation: 0.89, brightness: 0.835))
                    .cornerRadius(50)
            }
        }
    }
}

Here is the preview of the cart button and showing correctly..

Here is the screenshot of the tabview.As it showing when I click the add to cart button it increases the count and showing at Botton of the cart image ..

Answer 1

You get very little control over what is displayed in a tab item. You cannot do fancy things with ZStacks. From my experience, SwiftUI just finds some image and some text from the view you provide, and displays them in a system-defined way.

That said, you are reinventing badges. This sort of "red circle with text in it" on a tab bar can be created by modifying the tab's view (not the view in tabItem) with badge(_:).

var body: some View {
    TabView {
        OrderView()
            .tabItem {
                Image(systemName: "cart")
            }
            // this also automatically hides the badge when 0
            .badge(order.product.count)
    }
}

Badges only show up in list rows, menus and tab bars, so if you want to have a such a button at another place, you can still use your CartButton view.