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-20 05:09:35Z

4

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

edited Jun 20, 2021 at 5:09

answered Jun 20, 2021 at 4:15

aheze

31.5k12 gold badges107 silver badges159 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

D J Over a year ago

Thanks for Answer. Is it possible to separate the the two? Here is what I'm looking for it to look like. (i.sstatic.net/S4POJ.png) Just like the example you have, but with the list in the middle, not edge to edge.

aheze Over a year ago

@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.

Nirvan Nagar Over a year ago

.listRowBackground(...) was exactly what I needed. Thank you!

Atakan Yıldırım Over a year ago

You can also use listRowBackground(Color.clear)

Collectives™ on Stack Overflow

SwiftUI: Add List in to a scrollview with icon above

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related