SwiftUI: How to create different background colors for List sections?

Question

Created 11h

Replies 1

Boosts 0

Participants 2

I'm trying to achieve a specific UI design in SwiftUI where the bottom section of my List has a different background color than the top section. For example in the Medications portion of the Health app, the "Your Medications" Section has a different background than the top "Log" Section. How do I achieve this?:

Summary 3.jpeg

Here some example code. I wonder if I am supposed to use two Lists instead. If I use two Lists though and nest it in a ScrollView, the height of the lists needs to be specified. I am working with dynamic content, though so I don't think that is ideal.

class ProtocolMedication {} // Example model

struct HomeView: View {
    @Query private var protocolMedications: [ProtocolMedication]
    
    var body: some View {
        NavigationStack {
            List {
                // Upper sections with default background
                Section {
                    Text("Content 1")
                } header: {
                    Text("Log")
                }
                // Bottom section that needs different background
                Section {
                    ForEach(protocolMedications) { medication in
                        Text(medication.name)
                    }
                } header: {
                    Text("Your Medications")
                }
            }
            .listStyle(.insetGrouped)
        }
    }
}

Boost

Answer 1

Claude31 OP

2m

Did you try to use listRowBackground ?

I don't know if that's what you are looking for, but I've built an example from your code (replacing Query by State), with dummy structure for Medication.

struct ProtocolMedication: Identifiable {  // Should be completed with images, dates and other indications
    var id = UUID()
    var name : String
}

struct HomeView: View {
    /*@Query*/ @State private var protocolMedications: [ProtocolMedication] = [ProtocolMedication(name: "Testosterone")]
    
    var body: some View {
        NavigationStack {
            List {
                // Upper sections with default background
                Section {
                    Text("Content 1")
                } header: {
                    Text("Log")
                }
                // Bottom section that needs different background
                Section {
                    ForEach(protocolMedications) { medication in
                        Text(medication.name)
                            .listRowBackground(Color.green)
                    }
                } header: {
                    Text("Your Medications")
                }
            }
            .listStyle(.insetGrouped)
        }
    }
}

Here is the result:

Capture d’écran 2024-12-22 à 13.40.38.png

0