SwiftUI Segmented picker inside Navigation Bar and below navigation title

1.2k Views Asked by At

What Im trying to achieve is to have a segmented picker inside the navigation bar, but below the title of the navigation bar while still having the collapse animation. For example instead of the search, I need a segmented picker:

Uncollapsed Collapsed
Large title not collapsed enter image description here
1

There are 1 best solutions below

3
On

This does not look like that but it could work.

enter image description here

enter image description here

        NavigationView {
            List {
                Text("SwiftUI")
            }
            .navigationTitle("Title")
            .toolbar {
                ToolbarItem(placement: .primaryAction) {
                    VStack {
                        Picker("", selection: $selectedOption) {
                            ForEach(options, id:\.hashValue) {option in
                                Text(option)
                            }
                        }
                    }
                }
            }
        }

If it doesn't need to collapse you can do this.

        NavigationView {
             VStack {
                    Picker("", selection: $selectedOption) {
                        ForEach(options, id:\.hashValue) {option in
                            Text(option)
                        }
                    }
                    .pickerStyle(SegmentedPickerStyle())
                 .padding(.horizontal)
                 List {
                     ForEach(options, id:\.self) {
                         searchText in Text(searchText)
                     }
                 }
                 .navigationBarTitle(Text("Select"))
             }
         }

enter image description here