4

Hello SO community

I'm trying to recreate NavigationBar from Contact tab Apple's Phone in my SwiftUI app. enter image description here

I played around with .toolbar and modifications but really can't recreate it. I wanna replace TextField to SegmentPicker with saving all behavior of .navigationBarTitleDisplayMode(.inline). But don't know is it possible to use SwiftUI only to get it or need to dive into UIKit. I'm not the expert of UIKit and I will be glad for any help. I want use this NavBar in a exact screen in the app and if possible do not change my preferences of NavBar on other part of app. My code:

import SwiftUI

struct NavBar: View {

@State var pickerOptions: Int = 0

var body: some View {
    NavigationView {
        ScrollView(.vertical) {
            VStack {
                Text("Hello, World!")
            }
        }
        .navigationBarTitleDisplayMode(.inline)
        .toolbar {
            ToolbarItem(placement: .principal) {
                SegmentPicker
            }
            ToolbarItem(placement: .navigationBarTrailing) {
                Image(systemName: "plus")
            }
            ToolbarItem(placement: .navigationBarLeading) {
                Text("Groups")
            }
        }
    }
}

private var SegmentPicker: some View {
    VStack {
        Text("Contacts").font(.body.weight(.semibold))
        Picker("Options", selection: $pickerOptions) {
            Text("Cons").tag(0)
            Text("Prons").tag(1)
        }
        .pickerStyle(.segmented)
        .frame(width: 200)
    }
}
}
Nizami
  • 728
  • 1
  • 6
  • 24

0 Answers0