带有购物车的 SwiftUI 选项卡视图

Question

我在 swiftUI 中有视图。我有选项卡视图列表。这就是我正在尝试做的事情。当我单击“添加到购物车”按钮时，我预计购物车价值会增加并且工作正常，但问题是计数显示在选项卡视图的底部，我希望它像预览一样显示在购物车视图的顶部，它显示正确。

这是主视图..

import SwiftUI

struct MainView: View {

   @EnvironmentObject var  order: Order

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

这是购物车按钮查看..

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)
            }
        }
    }
}

这是购物车按钮的预览并正确显示..

这是选项卡视图的屏幕截图。正如它显示的那样，当我单击“添加到购物车”按钮时，它会增加计数并显示在购物车图像的底部。

Answer 1

您正在用您的 CartButton 视图重新发明

徽章

。标签栏上的这种“带有文本的红色圆圈”可以通过使用

tabItem

修改选项卡的视图（不是

badge(_:)

中的视图）来创建。

var body: some View {
    TabView {
        OrderView()
            .tabItem {
                Image(systemName: "cart")
            }
            .badge(order.product.count)
    }
}

徽章仅显示在列表行、菜单和选项卡栏中，因此如果您想在其他位置有这样的按钮，您仍然可以使用您的

CartButton

视图。