Search code examples
iosswiftswiftui

Remove background from VStack in SwuiftUI

I am learning some swiftui in my free time and I am currently developing a Todo app just to learn and I have a problem that I can not solve, I think it will be so easy to solve but I do not know how.

This is what the Preview shows

enter image description here

I just need to delete the white background, this is my code:

VStack {
     List {
         ForEach(taskManager.tasks) { task in
              TodoItem(todoTask: task, removeTodoTask: { taskToRemove in
                  taskManager.removeTask(taskToRemove)
              })
              .listRowBackground(Color.clear)
         }
                
         if isAddingTask {
               AddTaskView(newTask: $newTask, taskDate: $taskDate, taskManager: taskManager, scheduleNotification: scheduleNotification, isAddingTask: $isAddingTask)
         }
    }
    .scrollContentBackground(.hidden)
    .listStyle(.plain)
    .padding(.top, 16)
    .padding(.leading, 8)

    Spacer()

    AddTodoTaskButton(isAddingTask: $isAddingTask)
            
  }
  .frame(maxWidth: .infinity, maxHeight: .infinity)
  .background(Color.backgroundApp

And this is the struct

struct AddTaskView: View {
    @Binding var newTask: String
    @Binding var taskDate: Date
    var taskManager: TaskManager
    var scheduleNotification: (String, Date) -> Void
    @Binding var isAddingTask: Bool

    var body: some View {
        VStack {
            HStack {
                TextField("", text: $newTask, prompt: Text("Write new Todo")
                    .foregroundColor(.gray) // Texto de placeholder más suave
                )
                .foregroundColor(.white) // Color del texto introducido
                .padding()
                .background(Color.black.opacity(0.8)) // Fondo del TextField más oscuro
                .cornerRadius(10) // Bordes redondeados para un look más moderno

                Button(action: {
                    taskManager.addTask(title: newTask, date: taskDate) // Usar addTask del TaskManager
                    scheduleNotification(newTask, taskDate) // Programar notificación
                    newTask = "" // Limpiar el campo de texto
                    isAddingTask = false // Ocultar el formulario
                }) {
                    Image(systemName: "checkmark.circle.fill")
                        .foregroundColor(Color.black.opacity(0.8))
                        .font(.title)
                }
                .padding(.leading, 8)
            }
            .padding(.vertical, 8)

            // Personalizar la apariencia del DatePicker
            DatePicker("Date & Time", selection: $taskDate, displayedComponents: [.date, .hourAndMinute])
                .datePickerStyle(CompactDatePickerStyle())
                .cornerRadius(10)
                .accentColor(.gray) // Color del selector
                .foregroundColor(.gray) // Color del texto de la etiqueta
        }
    }
}
Solution

  • You are using a List as the parent container, so AddTaskView is being shown as a row in the list.

    To change or hide the row background, just add .listRowBackground as modifier to AddTaskView, like you are already doing for each TodoItem:

    if isAddingTask {
    AddTaskView(
        newTask: $newTask,
        taskDate: $taskDate,
        taskManager: taskManager,
        scheduleNotification: scheduleNotification,
        isAddingTask: $isAddingTask
    )
    .listRowBackground(Color.clear) // 👈 HERE
}