-3

I'll keep it quick: Does anyone know if SwiftUI have a built in method that renders something like this image: enter image description here

where the view just changes based on what label you tap? I wonder if it's possible to achieve this using some sort of navigation view or stack? I'd appreciate any input! Thanks.

EDIT:

            HStack {
                
                Picker(selection: $selected, label: Text("Mode"), content:{
                    Text("Projects").tag(1)
                    Text("Notes").tag(2)
                    Text("Docus").tag(3)
                }).pickerStyle(SegmentedPickerStyle())
                    .frame(width: 200, height: 10)
                    .padding(EdgeInsets(top: 0, leading: 0, bottom: 10, trailing: -0))
                
                if selected == 1 {
           // how would i show another view if the user selects option 1?
                }
                
                
            }
alex
  • 118
  • 1
  • 6

1 Answers1

1

This is a picker. to be precise, this is a segmented picker.

You can create it like so:

struct ContentView: View {
    @State private var favoriteColor = 0

    var body: some View {
            Picker("What is your favorite color?", selection: $favoriteColor) {
                Text("Red").tag(0)
                Text("Green").tag(1)
                Text("Blue").tag(2)
            }
            .pickerStyle(.segmented)
    }
}

When we create the picker we pass in a binding (when we change the picker's value it will know to switch to it) this is the thing with the dollar sign ($)

The next thing is to add the segments. So we add text views with a tag attached to each one.

Lastly we need to set the picker style (in this case the segmented)

.pickerStyle(.segmented)

I suggest you to look here: Create a segmented control and read values from it

Hope this helps!

Ori
  • 567
  • 3
  • 9
  • That definitely helped! I just tried implementing it and the UI does indeed work like I intend it to. However, I'm curious if it's possible to change views depending on the picker value? Let's say I have three picker values (1, 2, 3). Can I present sheet view 2 if the user taps 2 on the segmented picker? – alex Jun 30 '22 at 21:38
  • I suppose that easiest you can do it is with if statements. If you want you can share your code I will try to help you :) – Ori Jun 30 '22 at 21:41
  • I just updated my code. I put in a comment to explain what I mean. thanks, again! – alex Jun 30 '22 at 21:46
  • Do you want to present a sheet or navigate to another view or update the current view? – Ori Jun 30 '22 at 21:52
  • Currently I'm using fullScreenCover(isPresented: $isPresented, content: {ProjectsView()}). So I'd say navigation to another view yeah – alex Jun 30 '22 at 21:54
  • I believe sheet should work too I can just present it modally later – alex Jun 30 '22 at 21:55
  • So I did find a way to do it. I just set an if condition right when the view ends and set it to change view. Thanks, again! – alex Jul 02 '22 at 15:37