Segmented picker and title in toolbar .principal?

Any idea how to achieve this?

I've tried:

ToolbarItemGroup(placement: .principal)

and

ToolbarItem(placement: .principal)

also tried with a VStack but it does not work.

Answered by DTS Engineer in 862807022

Using a ToolbarItemGroup(placement: .principal) and a segmented picker should get you close.

For example:

struct View2: View {
    @State private var selectedTab = Shapes.star

    var body: some View {
        Color.blue
            .toolbar {
                ToolbarItemGroup(placement: .principal) {
                    Picker("Selected Tab", selection: $selectedTab) {
                        ForEach(Shapes.allCases) { tab in
                            Label {
                                Text(tab.rawValue)
                            } icon: {
                                tab.image
                            }
                            .tag(tab)
                        }
                    }
                    .pickerStyle(.segmented)
                }
            }
    }
}
struct ContentView: View {
    var body: some View {
        NavigationStack {
            NavigationLink("Next") {
                View2()
            }
        }
    }
}

enum Shapes: String, Identifiable, CaseIterable {
    case star, square, triangle

    var id: String { rawValue }
    var image: Image {
        switch self {
        case .star: return Image(systemName: "star")
        case .square: return Image(systemName: "square")
        case .triangle: return Image(systemName: "triangle")
        }
    }
}

Using a ToolbarItemGroup(placement: .principal) and a segmented picker should get you close.

For example:

struct View2: View {
    @State private var selectedTab = Shapes.star

    var body: some View {
        Color.blue
            .toolbar {
                ToolbarItemGroup(placement: .principal) {
                    Picker("Selected Tab", selection: $selectedTab) {
                        ForEach(Shapes.allCases) { tab in
                            Label {
                                Text(tab.rawValue)
                            } icon: {
                                tab.image
                            }
                            .tag(tab)
                        }
                    }
                    .pickerStyle(.segmented)
                }
            }
    }
}
struct ContentView: View {
    var body: some View {
        NavigationStack {
            NavigationLink("Next") {
                View2()
            }
        }
    }
}

enum Shapes: String, Identifiable, CaseIterable {
    case star, square, triangle

    var id: String { rawValue }
    var image: Image {
        switch self {
        case .star: return Image(systemName: "star")
        case .square: return Image(systemName: "square")
        case .triangle: return Image(systemName: "triangle")
        }
    }
}

The title is missing though, that’s the main issue I'm having. I can only seem to either put the navigation title or the segmented picker.

Segmented picker and title in toolbar .principal?
 
 
Q