ios – SwiftUI: Learn how to create totally different background colours for Record sections?

If I perceive appropriately, you need a totally different colour for the outer background across the part, this being the checklist group background.

• The default background will be hidden by making use of .scrollContentBackground(.hidden) to the Record. Then you possibly can apply your personal .background to the Record.

• The default background is UIColor.systemGroupedBackground, so this can be utilized as the primary layer in a ZStack that you just present within the background.

• Present the colour for the part background as the subsequent layer within the ZStack.

• The place of the second colour will be matched to the part header utilizing .matchedGeometryEffect with alignment: .prime.

• Apply .body(maxWidth: .infinity, alignment: .main) to the content material of the part header, in order that .prime (used for matching place) is then the center of the row, not simply the center of the content material.

• Padding can be utilized to tweak the place, if obligatory.

When you had extra sections then you should utilize the identical method for them too. Every part would have its personal layer within the ZStack. On this case, you would possibly need to keep away from colours which might be partially clear (colours with opacity), until you need the transparency results to mix.

For the checklist rows themselves, set your personal background utilizing .listRowBackground.

struct HomeView: View {
    @Namespace personal var ns

    var physique: some View {
        NavigationStack {
            Record {
                // Higher sections with default background
                Part {
                    Textual content("Content material 1")
                } header: {
                    Textual content("Log")
                }
                // Backside part that wants totally different background
                Part {
                    ForEach(1..<6) { i in
                        Textual content("Row (i)")
                    }
                    .padding(.main, 80)
                    .body(minHeight: 80)
                    .listRowBackground(
                        HStack(spacing: 0) {
                            Picture(systemName: "capsules")
                                .resizable()
                                .scaledToFit()
                                .body(width: 50)
                                .symbolRenderingMode(.hierarchical)
                                .padding(.horizontal)
                                .body(maxHeight: .infinity)
                                .background(Colour(.tertiarySystemBackground).gradient)
                            Colour(.secondarySystemGroupedBackground)
                        }
                    )
                } header: {
                    Textual content("Your Medicines")
                        .body(maxWidth: .infinity, alignment: .main)
                        .matchedGeometryEffect(
                            id: "Section2",
                            in: ns,
                            anchor: .prime
                        )
                }
            }
            .listStyle(.insetGrouped)
            .scrollContentBackground(.hidden)
            .background {
                ZStack {
                    Colour(.systemGroupedBackground)
                    Colour.yellow
                        .opacity(0.5)
                        .padding(.prime, -16)
                        .matchedGeometryEffect(
                            id: "Section2",
                            in: ns,
                            properties: .place,
                            anchor: .prime,
                            isSource: false
                        )
                }
                .ignoresSafeArea()
            }
        }
    }
}