SwiftUI List inside ScrollView - ios

Question

I want to make my List inside a ScrollView so that I can scroll List rows and headers together.
But I found that List inside ScrollView isn't working. It shows nothing.
I should use both of them.
I should use ScrollView so that I can make my header(image or text) also scrolled when I scroll the rows.
I should use List to use .ondelete() method.
my sample code is below.
#State private var numbers = [1,2,3,4,5,6,7,8,9]
var body: some View {
ScrollView {
Text("header")
List {
ForEach(numbers, id: \.self) {
Text("\($0)")
}
.onDelete { index in
// delete item
}
}
}
}
Anyone know why this happens and(or) how to fix?

Answer 1

It is possible but not when the List is using the full screen.
In the code example I used GeometryReader to make the list as big as possible. But you can also remove the GeometryReader and just insert a fixed dimension into .frame()
struct ContentView: View {
#State private var numbers = [1,2,3,4,5,6,7,8,9]
var body: some View {
GeometryReader { g in
ScrollView {
Text("header")
List {
ForEach(self.numbers, id: \.self) {
Text("\($0)")
}
.onDelete { index in
// delete item
}
}.frame(width: g.size.width - 5, height: g.size.height - 50, alignment: .center)
}
}
}
}

Answer 2

There is no need for two scrolling objects. You can also use section for this:
#State private var numbers = [1,2,3,4,5,6,7,8,9]
var body: some View {
List {
Section.init {
Text("Header")
}
ForEach(numbers, id: \.self) {
Text("\($0)")
}
.onDelete { index in
// delete item
}
}
}

Answer 3

Just put header inside the List, like
var body: some View {
List {
Text("Header").font(.title)
ForEach(numbers, id: \.self) {
Text("\($0)")
}
.onDelete { index in
// delete item
}
}
}