如何制作 Duolingo 风格的顶部栏，其中包含条纹、硬币和下拉按钮，允许我通过 Xcode 在 Swift 视图之间切换？

Question

我正在开发一个个人项目，在此过程中我想学习 Swift 和使用 Xcode 的 Swift UI。 我现在遇到了一个问题，我想在我的应用程序中实现一个包含三个元素的顶部栏：条纹计数（我在supabase中获取的数据），硬币计数相同的东西，主要问题是一个下拉按钮允许我在不同的视图之间切换

您可以查看我链接的图像，看看我希望它是什么样子。 顶栏设计

感谢那些愿意帮助我的人。

我尝试使用选项卡视图来完成此操作，但由于底部已经有一个选项卡视图，所以我想使用另一种方法，这样彼此就不会相互冲突。而且我没有设法添加在视图之间切换的下拉按钮。

Answer 1

这个范围非常广泛。检查以下示例，也许可以缩小范围到您的问题到底在哪里：

struct MyNavigationBar: View {
    
    enum ScreenType: CaseIterable, Identifiable {
        case white
        case blue
        case green
        
        var screenName: String {
            switch self {
            case .white: "White screen"
            case .blue: "Blue screen"
            case .green: "Green screen"
            }
        }
        
        var id: Int {
            switch self {
            case .white: 0
            case .blue: 1
            case .green: 2
            }
        }
    }
    
    @State private var screen: ScreenType = .white
    @State private var streakCount: Int = 0
    @State private var coinCount: Int = 50
    
    var body: some View {
        VStack(spacing: 0) {
            navigationBar()
            Group {
                switch screen {
                case .white: Color.white
                case .blue: Color.blue
                case .green: Color.green
                }
            }.ignoresSafeArea()
        }
    }
    
    private func navigationBar() -> some View {
        HStack {
            Menu("Select screen") {
                ForEach(ScreenType.allCases) { screen in
                    Button {
                        self.screen = screen
                    } label: {
                        Text(screen.screenName)
                    }
                }
            }
            Spacer()
            HStack(spacing: 20) {
                HStack {
                    Image(systemName: "flame")
                    Text("\(streakCount)")
                }
                HStack {
                    Image(systemName: "circle.circle")
                    Text("\(streakCount)")
                }
            }
        }.padding()
        .frame(maxWidth: .infinity)
        .frame(height: 70)
        .background(Color.purple.ignoresSafeArea())
    }
    
}

#Preview {
    MyNavigationBar()
}