SwiftUI 2 questions but very simple, about searchBar and the backgroundImage for List

Question

SwiftUI very simple 2 questions

1, how to make the searchBar stick to top so that when use scroll down they can still see they searchBar

2, I'm using a List and work with a TabView and I want the List or the VStack maybe(or something that is holding the List) to have a background Image(a png already in my Assets.xcassets). I tried ZStack or .background(Image("...")) but none of them worked.

Here is the image, I want the background to be as the teal color png image.

Here is the code of one of the view for TabView:

 struct Discover: View {
    @State private var keywords: String = ""
    var names = ["Yu Song", "ZhangYuan", "Kotoyama"]
    var body: some View {
        ZStack {
            List {
                HStack {
                    SearchBar(text: $keywords)
                    Image(systemName: "person")
                    Image(systemName: "bell")
                }
                ForEach(self.names.filter {
                    self.keywords.isEmpty ? true : $0.localizedCaseInsensitiveContains(self.keywords)
                }, id: \.self) { name in
                    Text(name)
                }
            }.background(Image("bg_global"))
        }.edgesIgnoringSafeArea(.all)
    }
}

here is the preview for your convinence:

Notice that I already added .background(Image("bg_global")) in List and VSrack but the image never showed.

Thanks a lot.

Answer 1

To make background visible it's needed to make List and its content transparent. It can be done for example in init ,

init() {
    UITableView.appearance().backgroundColor = .clear
    UITableViewCell.appearance().backgroundColor = .clear
}

Answer 2

Use a VStack instead of a ZStack to make the SearchBar stick to the top. And make sure the SearchBar is not part of the List View.

struct ContentView: View {
    init() {
        UITableView.appearance().backgroundColor = .clear
        UITableViewCell.appearance().backgroundColor = .clear
    }

    @State private var keywords: String = ""
    var names = ["Yu Song", "ZhangYuan", "Kotoyama"]
    var body: some View {
        VStack{
            // Your Search Bar View
            HStack{
                Spacer()
                Text("Search")
                Spacer()
            }.padding().background(Color.red)

            List {
                ForEach(self.names.filter {
                    self.keywords.isEmpty ? true : $0.localizedCaseInsensitiveContains(self.keywords)
                }, id: \.self) { name in
                    Text(name)
                }
            }
        }.offset(x: 0, y: 45).background(Color.yellow).edgesIgnoringSafeArea(.all)
    }
}

Since you also want to show the background in the safe areas you need to push down the view with offset .