How to set the background of a View in SwiftUI

Question

I'm making a swiftui app, I have a NavigationView that contains a VStack and a List inside.

I've tried to put the following line of code in a lot of places .background(Color.blue) but it had no effect anywhere (nothing happened).

How can I set a background for the view itself?

I know it’s a very simple thing, but it doesn’t work out at all...

This is my code:

struct ContentView: View {
   @Environment(\.managedObjectContext) var managedObjectContext
    
   @FetchRequest(entity: Todo.entity(), sortDescriptors: [NSSortDescriptor(keyPath: \Todo.name, ascending: true)]) var todos: FetchedResults<Todo>
    
   @State private var showingAddTodoView: Bool = false
   @State private var animatingButton: Bool = false
    
        var body: some View {
            NavigationView {
                ZStack {
                List {
                    ForEach(self.todos, id: \.self) { todo in
                    HStack {

                      Circle()
                        .frame(width: 12, height: 12, alignment: .center)
                        .foregroundColor(self.colorize(priority: todo.priority ?? "Normal"))
                      Text(todo.name ?? "Unknown")
                        .fontWeight(.semibold)
                      
                      Spacer()
                      
                      Text(todo.priority ?? "Unkown")
                        .font(.footnote)
                        .foregroundColor(Color(UIColor.systemGray2))
                        .padding(3)
                        .frame(minWidth: 62)
                        .overlay(
                            Capsule().stroke(Color(self.colorize(priority: todo.priority ?? "Normal")), lineWidth: 0.75)
                            )
                      Spacer()
                        
                        Image(systemName: todo.completed ? "checkmark.square": "square")
                            .foregroundColor(todo.completed ? .green : .black)
                            .onTapGesture {
                                self.updateTodo(todo)
                        }
                    }
                    .padding(.vertical, 10)
                    }
                    .onDelete(perform: deleteTodo)
                }
                .navigationBarTitle("Todos", displayMode: .inline)
                .navigationBarItems(
                    leading: EditButton(),
                    trailing:
                    Button(action: {
                        self.showingAddTodoView.toggle()
                    }) {
                        Image(systemName: "plus")
                    }
                    .sheet(isPresented: $showingAddTodoView) {
                        AddTodoView().environment(\.managedObjectContext, self.managedObjectContext)
                    }
                )
                if todos.count == 0 {
                    NoTodosView()
                }
            }
            .sheet(isPresented: $showingAddTodoView) {
                AddTodoView().environment(\.managedObjectContext, self.managedObjectContext)
            }
            .overlay(
                ZStack {
                  Group {
                      Circle()
                        .fill(Color.blue)
                        .opacity(self.animatingButton ? 0.2 : 0)
                        .scaleEffect(self.animatingButton ? 1 : 0)
                        .frame(width: 68, height: 68, alignment: .center)
                      Circle()
                        .fill(Color.blue)
                        .opacity(self.animatingButton ? 0.15 : 0)
                        .scaleEffect(self.animatingButton ? 1 : 0)
                        .frame(width: 88, height: 88, alignment: .center)
                    }
                    .animation(Animation.easeInOut(duration: 2).repeatForever(autoreverses: true))
                    Button(action: {
                    self.showingAddTodoView.toggle()
                }) {
                    Image(systemName: "plus.circle.fill")
                    .resizable()
                    .scaledToFit()
                        .background(Circle().fill(Color("Color")))
                        .frame(width: 48, height: 48, alignment: .center)
                    }
                    .onAppear(perform: {
                       self.animatingButton.toggle()
                    })
                }
                .padding(.bottom, 15)
                .padding(.trailing, 15)
                , alignment: .bottomTrailing
            )
       }
}

I want to set the background color for this view:

The background color of what though? The List? The header? — Stoic
– Stoic, Commented Apr 27, 2022 at 16:55
got it, thanks! Can you edit the question so that it only has needed information in it? I can't really answer your question if I can't reproduce it myself, and I cant reproduce it with your code because I dont have/know what your environment vars are, or what exactly your foreach is iterating over. Check out how to make an MRE (stackoverflow.com/help/minimal-reproducible-example) — Stoic
– Stoic, Commented Apr 27, 2022 at 18:35

Afrcvn · Accepted Answer · 2022-04-27 20:27:12Z

1

try this...

struct ContentView: View {
    var body: some View {
        UITableView.appearance().backgroundColor = .clear
        UITableViewCell.appearance().backgroundColor = .clear
        return NavigationView {
             ZStack {
                Color.blue
                    .edgesIgnoringSafeArea(.all)
                 
                List{
                    ForEach((1...5), id: \.self){_ in
                        HStack{
                            Text("item")
                        }
                    }
//                 .listRowBackground(Color.blue)
                }
            }
        }
    }
}

answered Apr 27, 2022 at 20:27

Afrcvn

1345 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pavnesh Singh · Accepted Answer · 2024-07-08 11:51:44Z

0

struct ContentView: View {
   var body: some View {
      ZStack{
         Color.red.ignoresSafeArea()
         Text("Your content")
      }
   }
}

answered Jul 8, 2024 at 11:51

Pavnesh Singh

676 bronze badges

Collectives™ on Stack Overflow

How to set the background of a View in SwiftUI

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related