簡體   English   中英

SwiftUI中如何從一個詳情頁跳轉到另一個並返回列表頁?

[英]How to jump from one detail page to another and return to the list page in SwiftUI?

當我使用“下一篇文章”按鈕跳轉到索引為3的文章詳情頁面時,我想go直接回到文章列表頁面而不是索引為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")]
}

此解決方案存在一些潛在的可擴展性問題,但它完成了基本工作:


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是一個 function ,如果按下“Pop”按鈕,它會被傳遞到后續文章視圖並被調用。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM