SwiftUI ZStack not showing bottom element with List

Question

When put Image to the bottom of ZStack , image just not showing

 
 struct ContentView: View {
     var body: some View {
        VStack{
            ZStack{
                Image(systemName:"folder") // not showing
                    .resizable()
                    .scaledToFit()
                    .frame(width: 70, height: 70, alignment: .center)
                List {
                    ForEach(1...8, id: \.self){ i in
                        Text("ROW \(i)")
                    }
                }
            }
        }
    }
}

and image will show if it's on top.

 
 struct ContentView: View {
     var body: some View {
        VStack{
            ZStack{
                List {
                    ForEach(1...8, id: \.self){ i in
                        Text("ROW \(i)")
                    }
                }
                Image(systemName:"folder") // This will show
                    .resizable()
                    .scaledToFit()
                    .frame(width: 70, height: 70, alignment: .center)
            }
        }
    }
}

How can I show the image at bottom, and hide it when List scroll to the top of image?

Answer 1

You can achieve the result you are looking for by changing the background of the list like this:

struct ContentView: View {
    var body: some View {
        List {
            ForEach(1...8, id: \.self){ i in
                Text("ROW \(i)")
            }
        }
        .background(
            ZStack {
                // Apply the default list background color in case you want it
                Color(UIColor.systemGroupedBackground)
                    .edgesIgnoringSafeArea(.all)
                
                Image(systemName: "folder")
                    .resizable()
                    .scaledToFit()
                    .frame(width: 70, height: 70, alignment: .center)
            }
        )
        .scrollContentBackground(.hidden)
    }
}