使用 SwiftUI 执行操作后如何转到特定的选项卡视图？

Question

我正在构建一个应用程序来管理虚拟数据中心（服务器、防火墙策略、负载平衡器......）。我有两个部分（使用标签视图）。一个显示您在数据中心中创建的所有元素的列表。另一部分是创建新元素。如果我们启动应用程序，我们会从列表部分开始。然后我尝试创建一个新服务器。为此，我转到创建部分，单击服务器并选择一个大小，这是我无法解决的前两个问题：

1. 为什么选择器的选项会小跳到屏幕顶部？如何删除它？
2. 屏幕顶部与选择器选项之间存在太多空间。怎么能去掉呢？

我遇到的最后一个问题是，创建服务器后，我返回创建部分，我想直接进入列表部分。我该怎么做？

在这里查看我遇到的问题/问题的基本代码。提前感谢您的帮助！

import SwiftUI

struct ContentView: View {
    @State private var selectedTab = 1
    var body: some View {
        TabView(selection: $selectedTab){
            CreateView()
                .tabItem {
                    Image(systemName: "plus")
                    Text("Create")
                }.tag(0)
            ListView()
                .tabItem {
                    Image(systemName: "cloud")
                    Text("List")
                }.tag(1)
        }
    }
}


struct CreateView: View {
    var body: some View {
         VStack{
           NavigationView{
               List{
                   NavigationLink(destination: CreateServerView()){
                       Text("Server")
                   }
                   Text("Firewall Policy")
                   Text("Load Balancer")
               }
               .navigationBarTitle("Select the element you want to create", displayMode: .inline)
           }
        }
    }
}

struct ListView: View {
    var body: some View {
        NavigationView{
            List{
                Section(header: Text("Servers")){
                    Text("Server 1")
                    Text("Server 2")
                }
                Section(header: Text("Firewall policies")){
                    Text("Firewall 1")
                    Text("Firewall 2")
                }
            }
            .navigationBarTitle("My virtual datacenter", displayMode: .large)
        }
    }
}

struct CreateServerView: View {
    @Environment(\.presentationMode) var presentationMode: Binding<PresentationMode>
    @State private var name: String = ""
    @State private var selectedFixServer = 0

    @State private var serverType = ["S", "M", "L", "XL"]
    var body: some View {
        NavigationView {
            Form {
                Section(header: Text("Name of the server")){
                    TextField("Name", text: $name)
                }
                Picker(selection: $selectedFixServer, label: Text("Size")) {
                    ForEach(0 ..< serverType.count) {
                        Text(self.serverType[$0])
                    }
                }
            }
            .navigationBarTitle("")
            .navigationBarHidden(true)
        }
        .navigationBarTitle("Create Server")
        .navigationBarBackButtonHidden(true)
        .navigationBarItems(
            leading:
                Button(action: {
                    self.presentationMode.wrappedValue.dismiss()
                }) {
                    Text("Cancel")
                },
            trailing:
                Button(action: {
                    self.presentationMode.wrappedValue.dismiss()
                }) {
                    Text("Create")
                }
        )
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Answer 1

一种变体是使用 .pickerStyle(SegmentedPickerStyle())，但我不知道这是否适合你。这个决定解决了 2 个问题，您不需要太多空间：

现在：

直接进入列表部分

在您的示例中，我只是在 CreateServerView 中创建 @Binding var selectedTab 并在解雇之前对其进行更改：

struct CreateServerView: View {
    // ...
    @Binding var selectedTab: Int
    // ...
        trailing:
                Button(action: {
                    self.selectedTab = 1
                    self.presentationMode.wrappedValue.dismiss()
                }) {
                    Text("Create")
                })
// ...
}

你需要传递这个变量，它会在创建服务器后直接进入列表

Answer 2

1. 为什么选择器的选项会跳到屏幕顶部？如何删除它？
2. 屏幕顶部和选择器选项之间的空间太大。怎么去掉？

这是因为您在现有的 NavigationView 中创建了第二个 NavigationView。因此，要解决此问题，只需删除 CreateServerView 中的 NavigationView（比如将其替换为 VStack 等）

注意：当我尝试使用您的代码时，我还注释了接下来的两行

//                .navigationBarTitle("")
//                .navigationBarHidden(true)