I have created a TabBar with three items.

enum TabItem : CaseIterable {
    case market
    case interest
    case wallet
}

struct TabBar: View {
    
    @State var tappedItem: TabItem = .market
    let tappedBackground = Color.primaryColor.opacity(0.2)
    
    var body: some View {
        HStack {
            TabBarItem(icon: "aqi.medium")
                .onTapGesture {
                    self.tappedItem = .market
                }
                .background(self.tappedItem == .market ? tappedBackground : Color.white)
                .cornerRadius(20)
                .animation(.linear, value: tappedItem)
                
            TabBarItem(icon:"list.bullet.rectangle.portrait")
                .onTapGesture {
                    self.tappedItem = .interest
                }
                .background(self.tappedItem == .interest ? tappedBackground : Color.white)
                .cornerRadius(20)
                .animation(.linear, value: tappedItem)
                
            
            TabBarItem(icon: "wallet.pass")
                .onTapGesture {
                    self.tappedItem = .wallet
                }
                .background(self.tappedItem == .wallet ? tappedBackground : Color.white)
                .cornerRadius(20)
                .animation(.linear, value: tappedItem)
        }
    }
    
}

The tapped item will change the background color to Color.primaryColor.opacity(0.2) and all others to Color.white.

Instead of Color.white how to get the default system background color?

CodePudding user response：

You can use the Color(uiColor:) initialiser, i.e.

Color(uiColor: .systemBackground)