如何使用 SwiftUI 将正确的链接传递到 Firebase 列表中的按钮

Question

我正在制作一个在网络上有一系列文章的应用程序。它从 Firebase 数据库生成一个列表，其中包含标题、URL 等。然后用户点击标题，然后拉出一个 web 视图，其中包含该网站。

现在的问题是列表填充了所有正确的数据并按照我想要的方式排序，但无论我点击哪个标题，它都会在 web 视图中显示相同的站点。它只是来自数据库的链接之一。例如，Y 上的一篇文章是数据库中的一篇文章。如果我点击列表中的任何标题，它会拉出文章 Y 的链接。

这是我获取数据的方式：

struct Algorithm: Identifiable {
    var id: String
    var title: String
    var link: String
    var keywords: String
    var category: String
}

class ArticlesViewModel: ObservableObject {
  @Published var books = [Algorithm]()
  
    private var db = Firestore.firestore()
      
      func fetchData() {
          db.collection("MainLibrary").order(by: "Title", descending: false).getDocuments { (querySnapshot, error) in
          guard let documents = querySnapshot?.documents else {
            print("No documents")
            return
          }

          self.books = documents.map { queryDocumentSnapshot -> Algorithm in
            let data = queryDocumentSnapshot.data()
              let id = data["ref"] as? String ?? ""
              let title = data["Title"] as? String ?? ""
            let link = data["url"] as? String ?? ""
            let category = data["Category"] as? String ?? ""
              let keywords = data["Keywords"] as? String ?? ""

              return Algorithm(id: id, title: title, link: link, keywords: keywords, category: category)
          }
            print(self.books)
        }
      }
    
}

这里是显示列表的代码：

List(viewModel.books) { algorithm in // (2)
                                            VStack(alignment: .leading) {
                                                HStack {
                                                    Button(algorithm.title){
                                                        showWebViewArts.toggle()
                                                        
                                                    }
                                                        .listRowSeparator(.visible, edges: .all)
                                                        .listRowSeparatorTint(Color.red)
                                                        .font(.headline)
                                                        .foregroundColor(.indigo)
                                                  //  Text(algorithm.link )
                                                   //     .font(.subheadline)
                                                }
                                                .sheet(isPresented: $showWebViewArts) {
                                                    VStack(spacing: 0) {
                                                        HeaderView()
                                                        WebView(url: URL(string: algorithm.link)!)
                                                        //.padding(.top, 50)
                                                            .background(Color.accentColor)
                                                    }
                                                }
                                              
                                       }
                                    }

还有一个用于 showWebViewAlerts 的私有变量。

我测试过它为每篇文章提取正确的 url（因此文本项中包含链接），它确实如此。但是当我点击时，它只会拉出同样错误的链接。

Answer 1

尝试这种方法，使用

.sheet(item:...)

代替

.sheet(isPresented: ...)

并将其添加到

List

中，如示例代码所示：

@State var selection: Algorithm?  // <-- here


 List(viewModel.books) { algorithm in
    ...
     Button(algorithm.title){
         selection = algorithm  // <-- here
     }
    ...
 }
  .sheet(item: $selection) { algorithm in   // <-- here outside the List
    VStack(spacing: 0) {
        HeaderView()
        WebView(url: URL(string: algorithm.link)!)
        //.padding(.top, 50)
            .background(Color.accentColor)
     }
  }