SwiftUI ScrollView 不显示从 ObservableObject 获取的结果

Posted

技术标签:

【中文标题】SwiftUI ScrollView 不显示从 ObservableObject 获取的结果【英文标题】:SwiftUI ScrollView doesn't show fetched results from an ObservableObject 【发布时间】:2019-11-23 12:08:27 【问题描述】:

我正在尝试通过单击“获取”按钮从 api 获取数据,并通过 ScrollView 中的 ForEach 循环显示它们。

我正在使用 MVVM 模型。提取本身发生在 ObservableObject 类中。

不幸的是,ScrollView 没有显示内容。如果我使用 List 而不是 ScrollView 它可以正常工作。

你知道我在这里缺少什么吗?

非常感谢您的帮助!

import SwiftUI

struct Photo: Identifiable, Decodable 

    let id = UUID()
    let title: String


class ContentViewModel: ObservableObject 

    let api = "https://jsonplaceholder.typicode.com/photos"

    @Published var photos: [Photo] = []

    func fetchData() 
        print("Fetching started")
        guard let url = URL(string: api) else  return 

        URLSession.shared.dataTask(with: url)  data, _, _ in
            DispatchQueue.main.async 
                self.photos = try! JSONDecoder().decode([Photo].self, from: data!)
                print("Fetching successfull. Fetched \(self.photos.count) photos.")
            
        .resume()
    


struct ContentView: View 

    @ObservedObject var contentVM = ContentViewModel()

    var body: some View 
        NavigationView 
            ScrollView 
                ForEach(self.contentVM.photos)  photo in
                    Text(photo.title)
                
            
            .navigationBarTitle("Home")
            .navigationBarItems(trailing: Button(action: 

                self.contentVM.fetchData()

                , label: 
                    Text("Fetch")
            ))
        
    


struct ContentView_Previews: PreviewProvider 
    static var previews: some View 
        ContentView()
    

【问题讨论】:

【参考方案1】:

你没有错过任何东西,我认为问题在于渲染内容。即使在您的示例数据显示在真实设备(iPhone 7 ios 13.1.1)上,但延迟很长。尝试减少内容或帮助ScrollView 对齐。我试过了——在设备上运行得更快,但只在设备上:

class ContentViewModel: ObservableObject 

    let api = "https://jsonplaceholder.typicode.com/photos"

    @Published var photos: [Photo] = []
    @Published var first100Photos: [Photo] = []

    func fetchData() 
        print("Fetching started")
        guard let url = URL(string: api) else  return 

        URLSession.shared.dataTask(with: url)  data, _, _ in
            DispatchQueue.main.async 
                self.photos = try! JSONDecoder().decode([Photo].self, from: data!)
                for index in 0...100 
                    self.first100Photos.append(self.photos[index])
                
                print("Fetching successfull. Fetched \(self.photos.count) photos.")
            
        .resume()
    


struct ContentView: View 

    @ObservedObject var contentVM = ContentViewModel()

    var body: some View 
        NavigationView 
            ScrollView(.vertical) 
                VStack 
                    ForEach(self.contentVM.first100Photos)  photo in
                        Text(photo.title)
                    
                

            
            .navigationBarTitle("Home")
            .navigationBarItems(trailing: Button(action: 

                self.contentVM.fetchData()

                , label: 
                    Text("Fetch")
            ))
        
    

【讨论】:

以上是关于SwiftUI ScrollView 不显示从 ObservableObject 获取的结果的主要内容,如果未能解决你的问题,请参考以下文章

SwiftUI ScrollView 不计算自定义 StaggeredGrid 高度

SwiftUI 水平 ScrollView 具有不可见的填充

如果超过视图高度,SwiftUI + ScrollView 无法添加视图

SwiftUI:在 ScrollView 中显示 HTML 文本

SwiftUI — 如何在 ScrollView 中显示倒计时?

SwiftUI LazyVGrid 不显示两列