SwiftUI: Add List in to a scrollview with icon above

Question

I'm trying to add a list of items into a view, while having an icon above. Currently when I build my code it, it separates the icon and the list, which is what I'm looking for but it makes the icon static and the list scrollable. I want both icon and the list to move together.

let items = ["Text", "Text", "Text", "Text"]

struct SignInView: View {
    var body: some View {
        NavigationView {
            
            VStack {
                Image(systemName: "car.fill")
                    .font(.system(size: 40))
                    .foregroundColor(.blue)
                    .frame(width: 150, height: 150)
                   
                List {
                    ForEach(items, id: \.self) { item in
                        HStack {
                        Image(systemName: "house.fill")
                                .foregroundColor(.blue)
                        Text(item)
                            Spacer ()
                        Text("1")
                            Image(systemName: "chevron.forward")
                                .foregroundColor(.blue)
                    }
                    }
                    
                }
                
                
                
            }
            
        }.navigationBarTitle("Car", displayMode: .inline)
        
    }
}

aheze · Accepted Answer · 2021-06-20T05:09:35.450

If you want the image to scroll with the List, you need to put it inside the list.

struct ContentView15: View {
    let items = ["Text", "Text", "Text", "Text"] /// Note (unrelated to your question): this should be inside ContentView
    
    var body: some View {
        NavigationView {
            List {
                Section { /// separate the image from the rest of the List's contents
                    Image(systemName: "car.fill")
                        .font(.system(size: 40))
                        .foregroundColor(.blue)
                        .frame(width: 150, height: 100)
                        .frame(maxWidth: .infinity) /// make image centered
                        .listRowBackground(Color(.secondarySystemBackground)) /// match the List's background color
                }
                
                ForEach(items, id: \.self) { item in
                    HStack {
                        Image(systemName: "house.fill")
                            .foregroundColor(.blue)
                        Text(item)
                        Spacer ()
                        Text("1")
                        Image(systemName: "chevron.forward")
                            .foregroundColor(.blue)
                    }
                }
            }
            .listStyle(InsetGroupedListStyle()) /// grouped appearance
            .navigationBarTitle("Car", displayMode: .inline)
            /// navigationBarTitle (use navigationTitle for iOS14+) should be *inside* your NavigationView
            /// otherwise, title won't show
        }
    }
}

Result:

Image scrolls along with list, which has a grouped style

Thanks for Answer. Is it possible to separate the the two? Here is what I'm looking for it to look like. (https://i.stack.imgur.com/S4POJ.png) Just like the example you have, but with the list in the middle, not edge to edge. — D J, Jun 20 '21 at 04:41
@DJ you can use `InsetGroupedListStyle` to get that appearance. But this then creates another problem: The car image is grouped along with the other rows. So, you need to then put the image inside its own `Section`. See my edit. — aheze, Jun 20 '21 at 05:11
`.listRowBackground(...)` was *exactly* what I needed. Thank you! — Nirvan Nagar, Dec 26 '21 at 01:37

SwiftUI: Add List in to a scrollview with icon above

1 Answers1