如何在同一个“主”视图中切换 2 个不同的视图？ SwiftUI

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()
      }
    }
  }
}