Picker under the search bar

Dear all,

I want to add a Picker view under the search bar similarly as seen on the Files app:

I would be happy with one of the two options - 1) to have a picker view to be visible under the search bar all the time (ie. even when the search bar is not activated), 2) to have the picker view to be visible when search bar is active.

I tried to implement this by using the toolbar modifier but without luck.

NavigationView {
    List {
        ...
    }
    .searchable(text: $searchText)
    .toolbar {
        ToolbarItem {
            Picker(selection: $selectedScope) {
                ...
            } label: {
                ...
            }
            .pickerStyle(.segmented)
        }
    }
}

I have also tried the workaround by adding the Picker view within the List/Form but in this case the Picker view disappears when the user scrolls the list down.

    List {
        Section {
            Picker(selection: $selectedScope) {
                ...
            } label: {
                ...
            }
            .pickerStyle(.segmented)
        }
        ...
    }
    .searchable(text: $searchText)
}

One last thing I tried was to put the picker view within the search bar’s suggestions parameter. This however, obscures the search results under the suggestions view.

    List {
        ...
    }
    .searchable(text: $searchText), suggestions: 
            Picker(selection: $selectedScope) {
                ...
            } label: {
                ...
            }
            .pickerStyle(.segmented)
     })
}

Any ideas?

Picker under the search bar
 
 
Q