SwiftUI中移除VStack白色背景的技术问题求助

我利用业余时间学习SwiftUI，目前正在开发一款Todo应用用于学习，但遇到一个无法解决的问题——需要移除预览界面中的白色背景（预览效果如下）：

当前代码 #

主视图代码：

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)

AddTaskView结构体代码：

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) // 更柔和的占位符文本
                )
                .foregroundColor(.white) // 输入文本颜色
                .padding()
                .background(Color.black.opacity(0.8)) // 更暗的TextField背景
                .cornerRadius(10) // 更现代的圆角外观

                Button(action: {
                    taskManager.addTask(title: newTask, date: taskDate) // 使用TaskManager的addTask方法
                    scheduleNotification(newTask, taskDate) // 安排通知
                    newTask = "" // 清空文本框
                    isAddingTask = false // 隐藏表单
                }) {
                    Image(systemName: "checkmark.circle.fill")
                        .foregroundColor(Color.black.opacity(0.8))
                        .font(.title)
                }
                .padding(.leading, 8)
            }
            .padding(.vertical, 8)

            // 自定义DatePicker外观
            DatePicker("Date & Time", selection: $taskDate, displayedComponents: [.date, .hourAndMinute])
                .datePickerStyle(CompactDatePickerStyle())
                .cornerRadius(10)
                .accentColor(.gray) // 选择器颜色
                .foregroundColor(.gray) // 标签文本颜色
        }
    }
}

解决方案 #

白色背景来自AddTaskView作为List行时的默认行背景，只需两步即可解决：

1. 给List中的AddTaskView添加行背景透明设置，和TodoItem保持一致：

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

2. 给AddTaskView的根VStack设置与主视图一致的背景色，避免内部控件出现默认白色：

VStack {
    // 原有内容
}
.background(Color.backgroundApp) // 或根据需求设置为Color.clear

另外注意主视图代码中.background(Color.backgroundApp)末尾缺少闭合括号，已在上面的代码示例中补全。

内容的提问来源于stack exchange，提问作者Tomas