ios – Find out how to mix GroupBox or DisclosureGroup with a Listing in a SwiftUI NavigationStack

Finally, I’m attempting to duplicate the structure utilized in Apple’s Suggestions app:

The app seems to have a NavigationStack that incorporates non-list objects however that match the general listing type. When I attempt to introduce a DisclosureGroup or GroupBox into the listing, it has it is personal padding for that merchandise that I do not seem to have the ability to take away with out eradicating it for all of the lists breaking the structure achieved within the Suggestions app above.

If I introduce a ScrollView, then the Listing disappears and inserting one other merchandise above the listing makes solely the Listing scrollable. This additionally stops the navigation bar from collapsing as you scroll.

This is a simplified instance of what I assumed would work:

NavigationStack {
    GroupBox(label: Textual content("My Label"), content material: {
        Textual content("The content material")
    })
    .padding()
    Listing {
        Part(header: Textual content("My First Part")) {
            Textual content("First listing merchandise")
            Textual content("Second listing merchandise")
        }
    }
    .navigationTitle("Navigation Title")
    .toolbarBackground(Coloration.blue)
}

On this instance, the GroupBox seems tied to the NavigationStack title bar. If I give it a background color, there’s additionally a transparent separation between the GroupBox and the Listing.

The Part headings are additionally non-standard however might be achieved with some easy modifiers however I’m in search of a approach to introduce non-list content material into the scrollable view the Listing offers in SwiftUI.

I might fortunately place the GroupBox into an inventory if I may collapse the padding however that doesn’t seem to work:

Listing {
    Part {
        GroupBox(label: Textual content("Label"), content material: {
            Textual content("Content material")
        })
        .listRowInsets(.none)
        .padding(0)
    }
}

I’m not significantly bothered by the search bar, though this can be a helpful requirement for the longer term. Proper now I might similar to to construct a view that made use of the NavigationStack which units a title for the view and while you scroll all the web page scrolls. The design language right here matches my use case completely however I’ve struggled with the insertion of non-list parts and hope somebody can level me in the precise route.