以编程方式更改 TabView 焦点

Question

我有一个 SwiftUI TabView，它调用 5 个单独的视图：位置、计算等。

这些工作完美。但有些视图是在应用程序内以编程方式调用的。因此，例如，当您选择位置时，您将移动到计算视图。当我这样做时，我如何以编程方式告诉它将 TabView 焦点从CalculateView 移到Calculate 图标上？

我有一个单独的 MenuView 来控制选项卡：

struct MenuView: View {
    
    @State public var selectedTab = Tab.location  // was private
    
    public enum Tab: Hashable {
            case location
            case calculate
            case install
            case results
            case about
    }
    
    var body: some View {
        VStack {
            TabView(selection: $selectedTab) {
                LocationView()
                    .tabItem {
                        Label("Location", systemImage: "globe.europe.africa")
                    }
                    .tag(Tab.location)
                CalculateView()
                    .tabItem {
                        Label("Calculate", systemImage: "apps.ipad")
                    }
                    .tag(Tab.calculate)
                InstallView()
                    .tabItem {
                        Label("Install", systemImage: "window.ceiling.closed")
                    }
                    .tag(Tab.install)
                ResultsView()
                    .tabItem {
                        Label("Results", systemImage: "sun.max.fill")
                    }
                    .tag(Tab.results)
                AboutView()
                    .tabItem {
                        Label("About", systemImage: "gear")
                    }
                    .tag(Tab.about)
            } // TabView
            .accentColor(.yellow)                                               //Active tab color
            .background(Color.white)
        }                                                                       // VStack
    }                                                                               // body
    
    init() {
        UITabBar.appearance().barTintColor = UIColor.systemGray //TabBar color
        UITabBar.appearance().backgroundColor = UIColor.white
        UITabBar.appearance().unselectedItemTintColor = UIColor.red //systemGray
        UITabBar.appearance().isOpaque = false
    }
} 

Answer 1

将

selectedTab

作为选项卡视图的绑定传递，并在这些视图中声明

@Binding var selectedTab: Tab

并更改其中的值。

这是一个工作示例代码，概述了该方法：

struct ContentView: View {
    var body: some View {
        MenuView()
    }
}

struct CalculateView: View {
    @Binding var selectedTab: Tab
    
    var body: some View {
        Button("click me CalculateView", action: {selectedTab = Tab.install} )
    }
}

struct LocationView: View {
    @Binding var selectedTab: Tab
    
    var body: some View {
        Button("click me LocationView", action: {selectedTab = Tab.calculate} )
    }
}

struct InstallView: View {
    @Binding var selectedTab: Tab
    
    var body: some View {
        Button("click me InstallView", action: {selectedTab = Tab.location} )
    }
}

public enum Tab: Hashable {
        case location
        case calculate
        case install
        case results
        case about
}

struct MenuView: View {
    
    @State var selectedTab = Tab.location

    var body: some View {
        VStack {
            TabView(selection: $selectedTab) {
                LocationView(selectedTab: $selectedTab)  // <-- here
                    .tabItem {
                        Label("Location", systemImage: "globe.europe.africa")
                    }
                    .tag(Tab.location)
                CalculateView(selectedTab: $selectedTab)
                    .tabItem {
                        Label("Calculate", systemImage: "apps.ipad")
                    }
                    .tag(Tab.calculate)
                InstallView(selectedTab: $selectedTab)
                    .tabItem {
                        Label("Install", systemImage: "window.ceiling.closed")
                    }
                    .tag(Tab.install)
//                ResultsView()
//                    .tabItem {
//                        Label("Results", systemImage: "sun.max.fill")
//                    }
//                    .tag(Tab.results)
//                AboutView()
//                    .tabItem {
//                        Label("About", systemImage: "gear")
//                    }
//                    .tag(Tab.about)
            } // TabView
            .accentColor(.yellow)
            .background(Color.white)
        }
    }
    
    init() {
        UITabBar.appearance().barTintColor = UIColor.systemGray //TabBar color
        UITabBar.appearance().backgroundColor = UIColor.white
        UITabBar.appearance().unselectedItemTintColor = UIColor.red //systemGray
        UITabBar.appearance().isOpaque = false
    }
} 

Answer 2

第1步.创建路由器类

import Foundation

final class NavigationRouter: ObservableObject {
    @Published var selectedTabIndex = 0
}

enum TabIndex: Int {
    case home = 0
    case details = 1
    case settings = 2
}

第2步，创建你的TabBar

import SwiftUI

struct MyTabView: View {

    @State var router = NavigationRouter()

    
    var body: some View {
        TabView(selection: $router.selectedTabIndex) {
            
            HomeScreen(router: router)
                .tabItem {
                    Label("Menu", systemImage: "list.dash")
                }
            
            DetailScreen(router: router)
                .tabItem {
                    Label("Order", systemImage: "square.and.pencil")
                }

            MySettingsScreen(router: router)
                .tabItem {
                    Label("Settings", systemImage: "arrow.down.app.fill")
                }
        }
    }
}

第 3 步：使用任意视图中的按钮进行导航

struct HomeScreen: View {
    let router: NavigationRouter
    
    var body: some View {
        Button("To Settings") {
            router.selectedTabIndex = TabIndex.settings.rawValue
        }
    }
}