How to change a Hstack color in SwiftUI?

Question

I have a little problem with a Hstack. The HStack is located in a List, but when I tried to change the color, I have this behaviour: Photo - > Picture

It looks like that is only put the color next to the text.

How can I solve this issue?

I'll post the code below:

VStack(alignment: .leading) {
            Text(Texts.cartViewText5)
                .font(.system(size: 20))
                .bold()
            
                .padding(.leading, 30)
            List {
                ForEach(coreDataViewModel.savedCartToShow) { car in
                    VStack(alignment: .leading) {
                        HStack {
                            WebImage(url: car.imageUrl, options: .refreshCached)
                              .onFailure(perform: { (error) in
                              } )
                                .resizable()
                                .scaledToFit()
                                .frame(width: 60, height: 60)
                                .padding()
                            
                            VStack(alignment: .leading, spacing: 10) {
                                Text(car.name ?? "")
                                    .font(.system(size: 16))
                                    .foregroundColor(.blackWhite)
                                
                                
                                
                                HStack {
                                    Text("\(car.price) lei")
                                        .foregroundColor(.colorGrayDark)
                                    
                                    Text("\(car.grams , specifier: "%.0f") g ")
                                        .font(.system(size: 16))
                                        .foregroundColor(.gray)
                                }
                            }
                            Spacer()
                            Button {
                                deleteTest(car)
                            } label: {
                                Image(systemName: "minus.circle")
                                    .resizable()
                                    .foregroundColor(.tabItemColor)
                                    .frame(width: 26, height: 26)
                            }
                            Text("x\(coreDataViewModel.countDictionary[car.id] ?? 0)")
                                .font(.headline)
                            
                            Button {
                                addTest(car)
                            } label:  {
                                Image(systemName: "plus.circle")
                                    .resizable()
                                    .foregroundColor(.turqoise)
                                    .frame(width: 26, height: 26)
                            }
                                
                        }
                    }
                    
                }
                .listRowBackground(Color.backgroundLightDark)
                HStack {
                    Text("Total : ")
                    Spacer()
                    Text("\(coreDataViewModel.savedMenu.map{$0.price}.reduce(0, +)) lei")
                        .foregroundColor(.orange)
                }
                .background(Color.backgroundLightDark)
            }
     
            .listStyle(PlainListStyle())
            .buttonStyle(PlainButtonStyle())
            
        }

are you referring to the `HStack` with the `Text("Total : ")` in it? If so it seems to work for me, changed to `.background(Color.blue)` and it shows blue. — workingdog support Ukraine, Apr 11 '22 at 00:41
Does this answer your question https://stackoverflow.com/a/60910124/12299030? Or this https://stackoverflow.com/a/62598818/12299030? — Asperi, Apr 11 '22 at 06:02

score 0 · Answer 1 · answered Jun 05 '23 at 23:24

In SwiftUI, when you apply the .background modifier to a view, it only applies the background color to the view's content, not the entire view itself. To change the background color of the entire HStack, you can wrap it inside another view and apply the background color to that wrapper view.

   ZStack {
            Rectangle()
                .fill(Color.blue)
            HStack {
                Text("Total: ")
                Spacer()
                Text("car")
                    .foregroundColor(.orange)
            }
            .padding()
        }

How to change a Hstack color in SwiftUI?

1 Answers1