如何在 SwiftUI 中从一个详情页跳转到另一个详情页并返回列表页？

Posted 2023-02-24

【中文标题】如何在 SwiftUI 中从一个详情页跳转到另一个详情页并返回列表页？

【英文标题】：How to jump from one detail page to another and return to the list page in SwiftUI?

【发布时间】：2021-02-08 15:04:53

【问题描述】：

当我使用“下一篇文章”按钮跳转到索引为3的文章详情页面时，我想直接返回文章列表页面而不是索引为2的文章详情页面。我尝试搜索方法返回指定页面，销毁页面，但是我没有找到。swiftui中如何实现这个效果？谢谢。我猜其他移动开发也会出现同样的场景吧？ ArticleListView 是：

struct ArticleListView: View 
    
    @EnvironmentObject var modelData:ModelData
    
    var body: some View 
        NavigationView
            List
                ForEach(modelData.articleList) article in
                    NavigationLink(destination:ArticleDetail(index:article.index))
                        ArticleItem(index:article.index);
                    
                
            
            .listStyle(PlainListStyle())
        
    

ArticleDetail 是这样的：

struct ArticleDetail: View 
    
    @EnvironmentObject var modelData:ModelData
    var index:Int
    
    var body: some View 
        
            VStack
                Text(modelData.articleList[index].htmlText)
                
                NavigationLink(destination:ArticleDetail(index:self.index+1))
                    Text("next article")
                
            
        
    

Article/ArticleItemView/ModelData 是这样的：

struct Article:Identifiable
    var id = UUID()
    var index:Int
    var htmlText:String


struct ArticleItem: View 
    
    @EnvironmentObject var modelData:ModelData
    var index:Int
    var body: some View 
        Text(modelData.articleList[index].htmlText)
    


final class ModelData:ObservableObject 
    @Published var articleList = [Article(index:0,htmlText: "first test text "),Article(index:1,htmlText: "second test text"),Article(index:2,htmlText: "third test text")]

【问题讨论】：

谁是They？您尝试过的code 在哪里？您是要我们为您编写代码吗？这不是这个网站的目的。请参考关于如何提出适当问题的 SO 指南。 ***.com/help/how-to-ask。另外，这与SwiftSwiftUI或android无关。

如果你用一些其他人可以下载、运行和为你处理的代码编写问题，你会得到很棒的答案。

很抱歉，感谢您的提醒。我刚刚修改了这个问题。谢谢。

【参考方案1】：

此解决方案存在一些潜在的可扩展性问题，但它完成了基本工作：

struct Article 
    var id = UUID()


struct ContentView: View 
    
    var articles = [Article(), Article(), Article(), Article()]
    @State private var activeId : UUID?
    
    func activeBinding(id: UUID) -> Binding<Bool> 
        .init  () -> Bool in
            activeId == id
         set:  (newValue) in
            activeId = newValue ? id : nil
        
    
    
    var body: some View 
        
        NavigationView 
            VStack(alignment: .leading, spacing: 20) 
                ForEach(articles, id: \.id)  article in
                    NavigationLink(destination: ArticleView(article: article,
                                                            articles: articles,
                                                            popToTop:  activeId = nil ),
                                   isActive: activeBinding(id: article.id)) 
                        Text("Link to article: \(article.id)")
                    
                
            
        
    


struct ArticleView : View 
    var article : Article
    var articles : [Article]
    var popToTop: () -> Void
    
    var body : some View 
        VStack(alignment: .leading, spacing: 20) 
            Text("Current: \(article.id)")
            
            Button("Pop") 
                popToTop()
            
            
            ForEach(articles, id: \.id)  listArticle in
                NavigationLink(destination: ArticleView(article: article, articles: articles, popToTop: popToTop)) 
                    Text("Link to article: \(listArticle.id)")
                
            
        
    

在主页上，***文章 ID 存储在 @State 变量中。这与***链接上的isActive 属性的自定义绑定相关联。基本上，当文章处于活动状态时，会显示链接，而当activeId 为 nil 时，链接将变为非活动状态，并弹出到顶部。

因为这是顶层视图，如果顶层 NavigationLink 处于非活动状态，堆栈中较低的任何视图都将被弹出。

popToTop 是一个传递给后续文章视图并在按下“弹出”按钮时被调用的函数。