iosswiftuibackground-color

How to set the background of a View in SwiftUI


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:

View


Solution

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