在 SwiftUI 视图中插入非列表元素

Question

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

Answer 1

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()
        }
    }

Answer 2

You can also use place your component (event a page view) inside the cell.

What can be done;

1. Use a Section to have a good style when you initiate another cell (because we'll make the following one transparent)
2. Create a new Section
3. Place a / any view
4. Add .listRowBackground(Color.clear) to the new view; to see the background transparently.
5. Add .listRowSeparator(.hidden) to the new view; to remove the cell line below.

After these, you'll have a placed view with additional padding. If this is important, you can play with padding to catch 0 padding distance. Also, by changing the list style (for this second group) with these kinds of styles, .listStyle(.grouped) , you can get catch zero padding/spacing.

The footer solution can work for images, but when you need some texts, you'll see that it'll scale down the sizes. So instead of footer, my solution is to use a cell view and show it as a non-cell item;

Here is my change, which works (at least I think)

import SwiftUI

struct ContentView: View {
    private var color = Color(red: 32/255, green: 35/255, blue: 255/255)
    // Just changed color to test my changes better.
    // private var color = Color(red: 32/255, green: 35/255, blue: 0/255)
    var body: some View {
        NavigationView {
            Form {
                Section() {
                    Text("AA")
                    Text("B")
                    Text("C")
                    Text("D")
                    Text("E")
                    Text("F")
                    Text("G")
                }
                //foreground color won't colorize the cell's bottom lines
                .foregroundColor(color)
                
                Section{
                    HStack{
                        // Use Spacer or another horizontal alignment
                        // I just tried with another image, you can place yours with full width and remove the Spacer() 's
                        Spacer()
                        Image(systemName: "checkmark.seal.fill")
                            .resizable()
                            .scaledToFit()
                            .foregroundColor(color)
                            .frame(width: 100)
                        Spacer()
                    }
                    .listRowBackground(Color.clear)
                    // Not required for single items; but would be usefull, if you'll add more views or sections
                    .listRowSeparator(.hidden)
                }
            }.navigationBarTitle(Text("Page"))
        }
    }
}

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

And here is why your methods won't work;

Scenario 1: Using VStack and HStack will split the screen into different scrollable. This is by design, In SwiftUI List element overrides Stacks and ScrollableView

(Reference)

Scenario 2: Same as Scenario 1

Scenario 3: Actually, this is the same as Scenario 1

You might try 3 things;

1. My solution, I don't see a major problem
2. Footer solution, which can work, but for some views, you will have problems
3. Determine a background color in ZStack and develop a custom button object which looks like a cell view (cons: non-native way and long time consuming work around)