使用 SwitUI 执行操作后如何转到特定选项卡视图? [英] How to go to a specific Tab View after performing an action with SwitUI?

问题描述

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

I'm tying to build an application to manage a virtual datacenter (servers, firewall policies, load balancers...). I have two sections (using tab view). One shows a list of all the elements you have created in your datacenter. The other section is to create new elements. If we launch the app, we start in the list section. Then I try to create a new server. For that, I go to the Create section, click on Server and select a Size, here the first two issues I couldn't solve:

1. 为什么选择器的选项会小幅跳跃到屏幕顶部?我怎样才能删除它?
2. 屏幕顶部和选择器选项之间空间太大.怎样才能去掉?

1. Why the options of the picker make a small jump to the top of the screen? How can I remove it?
2. There is too much space between the top of the screen and the options of the picker. How can remove it?

我遇到的最后一个问题是，在创建服务器后，我返回到创建部分，我想直接转到列表部分.我该怎么做?

And the last issue I have is that after creating the server, I return to the Create section and I would like to go directly to the List section. How can I do it?

这里是查看我遇到的问题/问题的基本代码.在此先感谢您的帮助！

Here basic code to see the questions/issues I have. Thanks in advance for any help!

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

推荐答案

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

One variant is to use .pickerStyle(SegmentedPickerStyle()), but I don't know if this suits you. With this decision 2 problems solves and you don't need much space for it:

现在关于:

直接进入列表部分

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

In your example I just make @Binding var selectedTab in CreateServerView and change it before dissmissing:

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

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

you need to pass this variable and it'll go directly to the list after creating server

这篇关于使用 SwitUI 执行操作后如何转到特定选项卡视图?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！