SwiftUI待办应用背景色修改求助：设置白色背景与灰色列表项

问题需求 #

需要将ToDo应用的整体背景设为白色，列表项背景设为灰色，但现有代码无法实现该效果。

解决方案 #

1. 全局设置应用白色背景 #

在根视图层级添加白色背景，确保覆盖系统默认的背景样式。

2. 自定义List样式与列表项背景 #

SwiftUI的List默认带有系统样式，需要移除其默认背景、分隔线，同时给每个列表项添加灰色背景。

修改后的代码 #

Main.swift #

@main
struct ToDoListApp: App {
    let persistenceController = PersistenceController.shared

    var body: some Scene {
        WindowGroup {
            let context = persistenceController.container.viewContext
            let dateHolder = DateHolder(context)
            
            ListView()
                .environment(\.managedObjectContext, persistenceController.container.viewContext)
                .environmentObject(dateHolder)
                .background(.white) // 设置全局白色背景
                .edgesIgnoringSafeArea(.all) // 让背景覆盖安全区范围
        }
    }
}

ListView.swift #

struct ListView: View
{
    @Environment(\.managedObjectContext) private var viewContext
    @EnvironmentObject var dateHolder: DateHolder

    @FetchRequest(
        sortDescriptors: [NSSortDescriptor(keyPath: \TaskItem.dueDate, ascending: true)],
        animation: .default)
    private var items: FetchedResults<TaskItem>

    var body: some View
    {
        NavigationView
        {
            VStack
            {
                ZStack
                {
                    List
                    {
                        ForEach(items)
                        { item in
                            NavigationLink(destination: EditTaskView(
                                passedTaskItem: item,
                                initialDate: Date())
                                .environmentObject(dateHolder))
                            {
                                // 给列表项设置灰色背景，搭配圆角和内边距优化视觉
                                Task(passedTaskItem: item)
                                    .environmentObject(dateHolder)
                                    .background(.gray.opacity(0.2))
                                    .cornerRadius(8)
                                    .padding(.vertical, 4)
                            }
                        }
                        .onDelete(perform: deleteItems)
                    }
                    .scrollContentBackground(.hidden) // 移除List默认背景
                    .listStyle(.plain) // 使用简洁列表样式，移除默认分隔线
                    .toolbar
                    {
                        ToolbarItem(placement: .navigationBarTrailing)
                        {
                            EditButton()
                        }
                    }
                    
                    FloatingButton().environmentObject(dateHolder)
                }
            }
            .navigationTitle("To-Do List")
            .background(.white) // 确保NavigationView内部背景为白色
        }
    }
    
    private func deleteItems(offsets: IndexSet)
    {
        withAnimation
        {
            offsets.map { items[$0] }.forEach(viewContext.delete)

            dateHolder.saveContext(viewContext)
        }
    }
}

关键修改说明 #

• 在Main.swift中给ListView添加.background(.white)和.edgesIgnoringSafeArea(.all)，确保整个应用背景为白色并覆盖安全区。
• 在ListView的List上添加.scrollContentBackground(.hidden)移除默认的列表背景，.listStyle(.plain)简化列表样式并移除默认分隔线。
• 给每个Task视图添加.background(.gray.opacity(0.2))设置灰色背景，搭配.cornerRadius和.padding优化视觉效果。

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