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

Posted 2023-02-26

【中文标题】如何在同一个“主”视图中切换 2 个不同的视图？ SwiftUI

【英文标题】：How can I switch 2 different views inside same "Main" view? SwiftUI

【发布时间】：2021-02-25 16:07:32

【问题描述】：

我的 SwiftUI 视图有下一个问题：我有“用户视图”，在这个视图中我有 2 个按钮 - “已保存”和“我的成就”。当用户点击任何按钮时，它将显示不同的视图（例如：像 TabBar）。 它将在同一屏幕上切换，而不是切换到另一个视图。

Photo

如果需要，我可以创建另一个视图，并将其放入我的视图中。 希望你能理解我的快速英语。 谢谢你的帮助！

代码：

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
    

【问题讨论】：

错误是什么？你被困在哪里了？

所以你不想视图切换到位，但希望它们重叠或什么？

我不知道如何通过按钮在同一个父视图中包含两个不同的视图。那么，如何在同一个问题上切换这两个视图

【参考方案1】：

您可以使用这样的分段选择器来做到这一点。

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

【讨论】：

谢谢！这是一个很棒的主意，而且很有效！但我需要其他设计。选择器设计很难定制

如果我们能更好地了解您希望它的外观，也许会有所帮助。你能描述得更详细些吗？