For a List in SwiftUI, I would like the list background to be clear so that only the cells appear, with the foreground and background I decide. When an iOS device is in light mode it's ok. But if it's in dark mode, it's kind of ugly.

I guess I could detect which mode it's in and build a color scheme around that. But I was hoping .background(Color.clear) would handle it all within one line.

Am I missing something, or is there no simple way?

var body: some View {
    ZStack {
        Color(.gray)
            .ignoresSafeArea()
        
        VStack {

            HStack {
                VStack {
                        Text("Sheet")
                            .textCase(.uppercase)
                            .font(.footnote)

                        List {
                            ForEach(selectedSheet, id: \.self) { sheet in
                                Text(sheet)
                                    .padding(10)
                                    .frame(maxWidth: .infinity)
                                    .background(selectedItem == sheet ? Color.blue : Color.clear)
                                    .foregroundColor(selectedItem == sheet ? Color.white : Color.primary)
                                    .cornerRadius(3)  // Optional: Rounded corners for styling
                                    .onTapGesture {
                                        selectedItem = sheet // Update the selected item when clicked
                                        filteredExcel = excelData.filter { $0.sheetName == selectedItem }
                                    }
                            }
                        }
                        .listStyle(PlainListStyle())
                        .frame(maxHeight: 150)  // Limit List height if needed
                        .background(Color.clear)
                        .cornerRadius(10)
                }
                
                VStack {
                    Text("Row")
                        .textCase(.uppercase)
                        .font(.footnote)
                    List {
                        ForEach(filteredExcel, id: \.self) { data in
                            Text(data.column)  // Use the value (or any property) of filteredData that you want to display
                                .padding(10)
                                .frame(maxWidth: .infinity)  // Make sure the text occupies full width
                                .cornerRadius(3)  // Optional: Rounded corners for styling
                        }
                    }
                    .listStyle(PlainListStyle())
                    .frame(maxHeight: 150)  // Limit List height if needed
                    .background(Color.clear)
                    .cornerRadius(10)
                }
                
            }

            
            Spacer()
            
        }
        .onAppear {
            filteredExcel = excelData.filter { $0.sheetName == selectedItem }
        }
    }
}

For a List in SwiftUI, I would like the list background to be clear so that only the cells appear, with the foreground and background I decide. When an iOS device is in light mode it's ok. But if it's in dark mode, it's kind of ugly.

I guess I could detect which mode it's in and build a color scheme around that. But I was hoping .background(Color.clear) would handle it all within one line.

Am I missing something, or is there no simple way?

var body: some View {
    ZStack {
        Color(.gray)
            .ignoresSafeArea()
        
        VStack {

            HStack {
                VStack {
                        Text("Sheet")
                            .textCase(.uppercase)
                            .font(.footnote)

                        List {
                            ForEach(selectedSheet, id: \.self) { sheet in
                                Text(sheet)
                                    .padding(10)
                                    .frame(maxWidth: .infinity)
                                    .background(selectedItem == sheet ? Color.blue : Color.clear)
                                    .foregroundColor(selectedItem == sheet ? Color.white : Color.primary)
                                    .cornerRadius(3)  // Optional: Rounded corners for styling
                                    .onTapGesture {
                                        selectedItem = sheet // Update the selected item when clicked
                                        filteredExcel = excelData.filter { $0.sheetName == selectedItem }
                                    }
                            }
                        }
                        .listStyle(PlainListStyle())
                        .frame(maxHeight: 150)  // Limit List height if needed
                        .background(Color.clear)
                        .cornerRadius(10)
                }
                
                VStack {
                    Text("Row")
                        .textCase(.uppercase)
                        .font(.footnote)
                    List {
                        ForEach(filteredExcel, id: \.self) { data in
                            Text(data.column)  // Use the value (or any property) of filteredData that you want to display
                                .padding(10)
                                .frame(maxWidth: .infinity)  // Make sure the text occupies full width
                                .cornerRadius(3)  // Optional: Rounded corners for styling
                        }
                    }
                    .listStyle(PlainListStyle())
                    .frame(maxHeight: 150)  // Limit List height if needed
                    .background(Color.clear)
                    .cornerRadius(10)
                }
                
            }

            
            Spacer()
            
        }
        .onAppear {
            filteredExcel = excelData.filter { $0.sheetName == selectedItem }
        }
    }
}

• swiftui-list

1 Answer 1

Instead of applying a background modifier on List, you should apply a listRowBackground on its rows. For example:

List {
    ForEach(selectedSheet, id: \.self) { sheet in
        Text(sheet)
            .padding(10)
            .frame(maxWidth: .infinity)

    }
    .listRowBackground(Color.clear)
}