How can I switch 2 different views inside same "Main" view? SwiftUI - swift

Question

I have next problem with my SwiftUI view: I have "User View" , in this view I have 2 buttons - "Saved" and "My achievement". When user tapped on any button , it will show different views (for example: like TabBar).
It will be switch on same screen , not transition to the other view.
Photo
I can create another views , and put it into my , if it needs.
Hope your understand my quick English.
Thank You for help!
Code:
import SwiftUI
struct MainPage: View {
///State variable for default selected tag
#State var selectedView = 3
///Body-view for the main screen
var body: some View {
TabView(selection: $selectedView) {
//MARK: - First screen (1st view)
VStack {
Text("First View")
}///1st Global VStack
.tabItem {
Label("First Item", systemImage: "1.circle")
}.tag(1)
//MARK: - Scond screen (2nd view)
VStack {
Text("Second View")
}///2nd Global VStack
.tabItem {
Label("Second Item", systemImage: "2.circle")
}
.tag(2)
//MARK: - Profile screen (3rd view)
ZStack(alignment: .top) {
Color.clear
HStack(alignment: .center){
VStack {
HStack() {
HStack() {
Button(action: {}, label: {
Image(systemName: "person")
.resizable()
.scaledToFit()
.frame(width: 35 , height: 35)
.foregroundColor(.gray)
})
.padding(.leading , -30)
.padding(.trailing, 20)
Text("User")
.bold()
.font(.custom("title", size: 24))
.lineLimit(1)
}.padding(.trailing , 110)
.frame(width: 260)
Button(action: {}, label: {
Image(systemName: "gearshape")
.resizable()
.scaledToFit()
.frame(width: 35 , height: 35)
.foregroundColor(.gray)
})
}
HStack(spacing: 30) {
Image(systemName: "")
Button(action: {
}, label: {
Text("Saved")
.foregroundColor(.gray)
.font(.custom("title", size: 17))
.lineLimit(1)
})
Image(systemName: "")
Button(action: {}, label: {
Text("My achievement")
.foregroundColor(.gray)
.font(.custom("title", size: 17))
.lineLimit(1)
})
}.frame(width: 300, height: 30, alignment: .center)
HStack(alignment: .center ,spacing: 10){
VStack(alignment: .leading , spacing: 20) {
}.frame(width: 160, height: 2, alignment: .leading)
.background(Color.blue)
.padding(10)
VStack(alignment: .trailing){
}.frame(width: 100, height: 2, alignment: .trailing)
.background(Color.red)
.padding()
}.frame(width: 420, height: 2, alignment: .center)
.background(Color.gray)
.padding(10)
}
}///Top HStack
.frame(width: 300, height: 70, alignment: .center)
.padding()
}///3rd Global ZStack
.tabItem {
Label("Third item", systemImage: "3.circle")
}.tag(3)
//MARK: - End
}
}
}

Answer 1

You could do it with a segmented picker like this.
struct ExampleView: View
{
#State private var selectedView = 0
private let pickerOptions = ["Saved", "Achievements"]
var body: some View {
VStack {
HStack {
Text("ExampleView")
.font(.title)
.bold()
Spacer()
} //: HStack
.padding()
Divider()
Picker(selection: $selectedView, label: Text("")) {
ForEach(0..<pickerOptions.count) {
Text(self.pickerOptions[$0])
} //: ForEach
} //: Picker
.pickerStyle(SegmentedPickerStyle())
.padding()
if selectedView == 0
{
SavedView()
}
else if selectedView == 1
{
AchievementsView()
}
}
}
}