[英]SwiftUI NavigationLink in the list doesn't get the right detail page with isActive
[英]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.