SwiftUI 在选项卡之间导航的正确方式

Posted 2023-02-24

【中文标题】SwiftUI 在选项卡之间导航的正确方式

【英文标题】：SwiftUI Navigating between tabs correct way

【发布时间】：2020-10-02 10:29:57

【问题描述】：

我有两个标签：“主要”和“朋友”。朋友有一个人员列表，我可以点击人员导航到他们的个人资料。

我想完成两件事：

从“主要”选项卡导航到朋友“Mark”的个人资料。 按下后退按钮返回“主”选项卡。

我已经完成了#1，但是没有动画过渡。不知道如何完成#2。

enum Tab 
    case home, friends


struct ContentView: View 
    @State var tab: Tab = .home
    @State var selectedFriend: String?
    @State var friends: [String] = ["Mark", "Spencer"]
    
    var body: some View 
        TabView(selection: $tab) 
            NavigationView 
                VStack 
                    Button("You have a new friend Mark! Click to see his profile.") 
                        tab = .friends
                        selectedFriend = "Mark"
                    
                
            
            .tabItem 
                Label("Home", systemImage: "list.bullet")
            
            .tag(Tab.home)
            
            NavigationView 
                FriendsList(selected: $selectedFriend, friends: friends)
            
            .tabItem 
                Label("Friends", systemImage: "list.bullet")
            
            .tag(Tab.friends)
        
        
    


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



struct FriendsList: View 
    @Binding var selected: String?
    var friends: [String]
    
    var body: some View 
        VStack 
            ForEach(friends, id:\.self)  friend in
                NavigationLink(destination: FriendDetails(name: friend), tag: friend, selection: $selected)  EmptyView() 
            

            List 
                ForEach(friends, id:\.self) friend in
                    Button(friend) 
                        self.selected = friend
                    
                
            
        
    


struct FriendDetails: View 
    var name: String
    
    var body: some View 
        Text("details of \(name)")
    

【参考方案1】：

这对我有用。添加了.listStyle(PlainListStyle()) 以删除填充（我认为它看起来更好）

import SwiftUI

enum Tab 
    case home, friends


struct ContentView: View 
    @State var tab: Tab = .home
    @State var selectedFriend: String?
    @State var friends: [String] = ["Mark", "Spencer"]
    @State var showFriendDetail = false
    
    var body: some View 
        TabView(selection: $tab) 
            NavigationView 
                VStack 
                    NavigationLink(destination: FriendDetails(name: selectedFriend ?? "Unknown"), isActive: $showFriendDetail)  EmptyView() 
                    Button("You have a new friend Mark! Click to see his profile.") 
                        selectedFriend = "Mark"
                        showFriendDetail = true
                    
                
            
            .tabItem 
                Label("Home", systemImage: "list.bullet")
            
            .tag(Tab.home)
            
            NavigationView 
                FriendsList(friends: friends)
            
            .tabItem 
                Label("Friends", systemImage: "list.bullet")
            
            .tag(Tab.friends)
        
        
    


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



struct FriendsList: View 
    @State var selected: String?
    var friends: [String]
    
    var body: some View 
        VStack 
            ForEach(friends, id:\.self)  friend in
                NavigationLink(destination: FriendDetails(name: friend), tag: friend, selection: $selected)  EmptyView() 
            

            List 
                ForEach(friends, id:\.self) friend in
                    Button(friend) 
                        self.selected = friend
                    
                
            .listStyle(PlainListStyle())
        
    


struct FriendDetails: View 
    var name: String
    
    var body: some View 
        Text("details of \(name)")
    

【参考方案2】：

在主页选项卡上，关闭按钮并改用 NavigationLink。 NavigationLinks 是从左到右推送的 segues，并内置了一个默认的后退按钮。

   TabView(selection: $tab) 
        NavigationView 
            VStack 
                NavigationLink(
                    destination: FriendDetails(name: "Mark"),
                    label: 
                        Text("You have a new friend Mark! Click to see his profile.")
                    )
            
        
        .tabItem 
            Label("Home", systemImage: "list.bullet")