How to add a search bar to a list?

Question

Created Oct ’21

Replies 1

Boosts 0

Views 1.7k

Participants 2

Hi guys, I try to use .searchable to add search bar to a list, see my code as below, but it doesn't work. How can I make it work? Somebody, please help me!!!

import SwiftUI

@available(iOS 15.0, *)
struct ContentView: View {
   
  var body: some View {
    NavigationView {
      TabView{
        VStack{
          List{
            Text("aaa")
            Text("bbb")
            Text("ccc")
          }
          .searchable(text: .constant(""))
        }
        .tabItem({
          Text("tab1")
           
        })
        VStack{
          Text("tab2")
        }
        .tabItem({
          Text("tab2")
           
        })
         
      }
       
    }
     
  }
}

@available(iOS 15.0, *)
struct ContentView_Previews: PreviewProvider {
  static var previews: some View {
    ContentView()
  }
}

Boost

Answer 1

OOPer OP

Oct ’21

I may be mistaking what you mean by doesn't work, so assume showing a search bar would be your primitive purpose here.

Please try something like this:

struct ContentView: View {
    var body: some View {
        NavigationView {
            TabView{
                VStack{
                    List{
                        Text("aaa")
                        Text("bbb")
                        Text("ccc")
                    }
                }
                .tabItem({
                    Text("tab1")
                })
                VStack{
                    Text("tab2")
                }
                .tabItem({
                    Text("tab2")
                    
                })
            }
            .searchable(text: .constant("")) //<- `searchable` added to `TabView`
        }
    }
}

In your code, TabView is the only child view of NavigationView. And searchable modifier needs to be placed on any of the direct child view of NavigationView, or on the NavigationView itself.

0