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

Question

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

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

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

如果您已经有了上一屏幕的导航 link，那么问题是您以错误的方式使用了 endIndex。检查此线程是否正确使用 ()。

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

How do I switch between screens in TabView and from the latter to the other View?

xcode

swiftui

swiftui-navigationlink