D J
D J

Reputation: 73

SwiftUI: Add List in to a scrollview with icon above

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

Upvotes: 5

Views: 3278

Answers (1)

aheze
aheze

Reputation: 30228

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

Upvotes: 4

Related Questions