Reputation: 73
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
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:
Upvotes: 4