我很难在 SwiftUI 中创建一个 UIKit 中非常常见的用例。

这是场景。假设我们要创建一个大纲/详细信息应用程序，用户可以在其中从列表中选择一个项目并导航到包含更多详细信息的屏幕。

为了摆脱 Apple 教程和 WWDC 视频中常见的 List 示例，应用需要从 REST API 获取每个屏幕的数据。

问题:SwiftUI 的声明性语法导致在 List 中的行一出现就创建所有目标 View 。

这是一个使用 Stack Overflow API 的示例。第一个屏幕中的列表将显示问题列表。选择一行将导致显示所选问题正文的第二个屏幕。完整的 Xcode 项目是 on GitHub )

首先，我们需要一个表示问题的结构。

struct Question: Decodable, Hashable {
    let questionId: Int
    let title: String
    let body: String?
}

struct Wrapper: Decodable {
    let items: [Question]
}

(需要 Wrapper 结构，因为 Stack Exchange API 将结果包装在 JSON 对象中)

然后，我们为第一个屏幕创建一个 BindableObject，它从 REST API 获取问题列表。

class QuestionsData: BindableObject {
    let didChange = PassthroughSubject<QuestionsData, Never>()

    var questions: [Question] = [] {
        didSet { didChange.send(self) }
    }

    init() {
        let url = URL(string: "https://api.stackexchange.com/2.2/questions?site=stackoverflow")!
        let session = URLSession(configuration: .default, delegate: nil, delegateQueue: .main)
        session.dataTask(with: url) { [weak self] (data, response, error) in
            let decoder = JSONDecoder()
            decoder.keyDecodingStrategy = .convertFromSnakeCase
            let wrapper = try! decoder.decode(Wrapper.self, from: data!)
            self?.questions = wrapper.items
        }.resume()
    }
}

同样，我们为详细信息屏幕创建了第二个 BindableObject，它获取所选问题的正文(为了简单起见，请原谅网络代码的重复)。

class DetaildData: BindableObject {
    let didChange = PassthroughSubject<DetaildData, Never>()

    var question: Question {
        didSet { didChange.send(self) }
    }

    init(question: Question) {
        self.question = question
        let url = URL(string: "https://api.stackexchange.com/2.2/questions/\(question.questionId)?site=stackoverflow&filter=!9Z(-wwYGT")!
        let session = URLSession(configuration: .default, delegate: nil, delegateQueue: .main)
        session.dataTask(with: url) { [weak self] (data, response, error) in
            let decoder = JSONDecoder()
            decoder.keyDecodingStrategy = .convertFromSnakeCase
            let wrapper = try! decoder.decode(Wrapper.self, from: data!)
            self?.question = wrapper.items[0]
            }.resume()
    }
}

这两个 SwiftUI View 很简单。

• 第一个包含 NavigationView 内的 List。每个 行包含在指向详细信息的 NavigationButton 中 屏幕。

• 第二个 View 仅以多行形式显示问题的正文 文本 View 。

每个 View 都有一个指向上面创建的相应对象的@ObjectBinding。

struct QuestionListView : View {
    @ObjectBinding var data: QuestionsData

    var body: some View {
        NavigationView {
            List(data.questions.identified(by: \.self)) { question in
                NavigationButton(destination: DetailView(data: DetaildData(question: question))) {
                    Text(question.title)
                }
            }
        }
    }
}

struct DetailView: View {
    @ObjectBinding var data: DetaildData

    var body: some View {
        data.question.body.map {
            Text($0).lineLimit(nil)
        }
    }
}

如果您运行该应用程序，它就可以运行。

但问题是每个 NavigationButton 都需要一个目标 View 。鉴于 SwiftUI 的声明性质，当列表被填充时，会立即为每一行创建一个 DetailView。

有人可能会争辩说 SwiftUI View 是轻量级结构，所以这不是问题。问题是这些 View 中的每一个都需要一个 DetaildData 实例，它在创建后立即启动网络请求，然后用户点击一行。您可以在其初始化程序中放置断点或 print 语句来验证这一点。

当然，可以通过将网络代码提取到一个单独的方法中来延迟 DetaildData 类中的网络请求，然后我们使用 onAppear(perform:)(您可以在 GitHub 上的最终代码中看到)。

但这仍然会导致创建多个 DetaildData 实例，这些实例从未被使用过，并且是一种内存浪费。此外，在这个简单的示例中，这些对象是轻量级的，但在其他情况下，它们的构建成本可能很高。

SwiftUI 应该是这样工作的吗？还是我遗漏了一些关键概念？

最佳答案

正如您所发现的，List(或 ForEach)在请求 List 时为其每一行创建行 View 为其 body 。具体来说，在这段代码中:

struct QuestionListView : View {
    @ObjectBinding var data: QuestionsData

    var body: some View {
        NavigationView {
            List(data.questions.identified(by: \.self)) { question in
                NavigationButton(destination: DetailView(data: DetailData(question: question))) {
                    Text(question.title)
                }
            }
        }
    }
}

当 SwiftUI 向 QuestionListView 询问其 body 时，QuestionListView body 访问器将立即创建一个 DetailView 和 data.questions 中每个 Question 的一个 DetailData。

但是，SwiftUI 不会向DetailView询问它的body，直到DetailView 在屏幕上。因此，如果您的 List 在屏幕上有 12 行的空间，SwiftUI 只会询问前 12 个 DetailView 的 body 属性。

因此，不要在DetailData 的init 中启动dataTask。在 DetailData 的 question 访问器中懒洋洋地启动它。这样，在 SwiftUI 向 DetailView 请求其 body 之前，它不会运行。

关于ios - SwiftUI 在用户导航到它们之前创建目标 View ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56821074/