Inserting non-list elements in a SwiftUI view-CodePudding

I am working on a SwiftUI page that consists of a table view with some rows but I would also like to have some non-cell elements in there. I am currently having some issues with this and I have tried various different avenues. I basically just need some elements in there that aren't wrapped inside a cell while still maintaining the tableview's grayish background. In my example below, I am trying to get an image right under the table rows.

Below is my code:

import SwiftUI


struct ContentView: View {
    private var color = Color(red: 32/255, green: 35/255, blue: 0/255)
    var body: some View {
        NavigationView {
            Form {
                Section() {
                    HStack {
                        Text("AA")
                            .foregroundColor(color)
                        
                    }
                    HStack {
                        Text("B")
                            .foregroundColor(color)
                        
                    }
                    HStack {
                        Text("C")
                            .foregroundColor(color)
                        
                    }
                    HStack {
                        Text("D")
                            .foregroundColor(color)
                    }
                    HStack {
                        Text("E")
                            .foregroundColor(color)
                        
                    }
                    HStack {
                        Text("F")
                            .foregroundColor(color)
                       
                    }
                    HStack {
                        Text("G")
                            .foregroundColor(color)
                       
                    }
                }
                
            }.navigationBarTitle(Text("Page"))
            
            HStack {
                Image(systemName: "fallLeaves")
            }
            
        }
        
        
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Here are all of the scenarios I have tried that have been unsuccessful:

Scenario 1: Adding a HStack with the image outside of the List. (What the current code shows) This does not get the image to show as the table view takes the whole view.
Scenario 2: Adding the HStack with the image within the list block. This wraps the image around the cell like so

Scenario 3: Wrapping the list and the HStack contains the image inside a VStack. This is no good as it's basically like a split-screen with two different views. The table gets shrunk and has it's own scroll bar. Notice the scroll bar in the image below

The ideal solution would look like this but I'm not sure what to try as I can't get it to look like this where it's all one continuous view and the image isn't in a cell

CodePudding user response：

i'll let you work out the padding and the rounding.

    struct ContentView: View {
        private var color = Color(red: 32/255, green: 35/255, blue: 0/255)
        
        var body: some View {
            NavigationView {
                Form {
                    Section(content: {
                        HStack {
                            Text("AA")
                                .foregroundColor(color)
                            
                        }
                        HStack {
                            Text("B")
                                .foregroundColor(color)
                            
                        }
                    }, footer: {
                        Image("fallLeaves")
                    })
                }.navigationBarTitle(Text("Page"))
            }
        }
    }
    
    struct ContentView_Previews: PreviewProvider {
        static var previews: some View {
            ContentView()
        }
    }