如何在 TabView 中的屏幕之间切换以及从后者切换到另一个视图？答案

【问题标题】：How do I switch between screens in TabView and from the latter to the other View?如何在 TabView 中的屏幕之间切换以及从后者切换到另一个视图？
【发布时间】：2021-04-20 09:19:54
【问题描述】：

我创建了一个简单的集合，带有一个跳转到下一个视图的按钮。从最后一个视图应该有一个到 AddItemView 的转换，但它没有发生 - 它返回到第一个屏幕。你能告诉我我哪里做错了吗？将背景图像放置在第一个集合屏幕上的正确方法是什么，这样它就不会出现在后面的屏幕上？

import SwiftUI

struct AddItemView: View {
    var body: some View {
        Text("Hallo!")
    }
}

struct ContentView: View {
    
    var colors: [Color] = [ .orange, .green, .yellow, .pink, .purple ]
    var emojis: [String] = [ "????", "????", "????" , "????", "????"]
    @State private var tabSelection = 0
    
    var body: some View {
        
        TabView(selection: $tabSelection) {
            
            ForEach(0..<emojis.endIndex) { index in
                VStack {
                    Text(emojis[index])
                        .font(.system(size: 150))
                        .frame(minWidth: 30, maxWidth: .infinity, minHeight: 0, maxHeight: 250)
                        .background(colors[index])
                        .clipShape(RoundedRectangle(cornerRadius: 30))
                        .padding()
                        .tabItem {
                            Text(emojis[index])
                        }
                    Button(action: {
                        self.tabSelection += 1   
                    }) {
                        if tabSelection == emojis.endIndex {
                            NavigationLink(destination: AddItemView()) {
                                Text("Open View")
                            }
                        } else {
                            Text("Change to next tab")
                        }
                    }
                }
            }
        }
        .tabViewStyle(PageTabViewStyle())
        .indexViewStyle(PageIndexViewStyle(backgroundDisplayMode: .always))
        .tabViewStyle(PageTabViewStyle.init(indexDisplayMode: .never))
    }
}

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

【问题讨论】：

标签： xcode swiftui swiftui-navigationlink

【解决方案1】：

在此代码中，您不必使用NavigationView。需要导航到下一个屏幕。如果存在导航控制器，则类似推送视图控制器的概念。另外，删除endIndex 并使用indices。

struct ContentView: View {
    
    var colors: [Color] = [ .orange, .green, .yellow, .pink, .purple ]
    var emojis: [String] = [ "?", "?", "?" , "?", "?"]
    @State private var tabSelection = 0
    
    var body: some View {
        NavigationView { //<- add navigation view
            TabView(selection: $tabSelection) {
                
                ForEach(emojis.indices) { index in //<-- use indices
                    VStack {
                        Text(emojis[index])
                            .font(.system(size: 150))
                            .frame(minWidth: 30, maxWidth: .infinity, minHeight: 0, maxHeight: 250)
                            .background(colors[index])
                            .clipShape(RoundedRectangle(cornerRadius: 30))
                            .padding()
                            .tabItem {
                                Text(emojis[index])
                            }
                        Button(action: {
                            self.tabSelection += 1
                        }) {
                            if tabSelection == emojis.count - 1 { //<- use count
                                NavigationLink(destination: AddItemView()) {
                                    Text("Open View")
                                }
                            } else {
                                Text("Change to next tab")
                            }
                        }
                    }
                }
            }
            .tabViewStyle(PageTabViewStyle())
            .indexViewStyle(PageIndexViewStyle(backgroundDisplayMode: .always))
            .tabViewStyle(PageTabViewStyle.init(indexDisplayMode: .never))
        }
    }
}

如果您已经有上一个屏幕的导航链接，那么问题是您以错误的方式使用 endIndex。检查此线程是否正确使用 (https://stackoverflow.com/a/36683863/14733292)。

【讨论】：