SwiftUI视图未根据Loader更新，如何动态展示服务端数据？

DevOps 小满

2026-8-1

问题：SwiftUI根据服务端返回数据动态展示视图无内容

控制台打印服务端返回数据count为25，但SwiftUI视图无内容展示；硬编码设置numberOfRows = 25时视图正常显示25个元素。

视图代码

var body: some View {
    ScrollView(.vertical) {
        VStack(spacing: 10) {
            ForEach(0 ..< loader.numberOfRows, id: \.self) { index in
                Image("")
                    .frame(width: 100, height: 100)
                    .background(Color.random)
                    .clipped()
            }
        }
    }
}

Loader代码

final class GiphyLoader {
@Published var data: [GifData] = []
@Published var numberOfRows = 0

init() {
    loadImages()
}

func loadImages() {
    ImageService.getImages { [weak self] response in
        self?.data = response?.data ?? []
        guard let count = response?.data.count else {
            return
        }
        self?.numberOfRows = count
        print(self?.numberOfRows)
    }
}
}

解决方案

首先确认GiphyLoader实例在SwiftUI视图中是用@StateObject或@ObservedObject修饰的，只有这样视图才能监听@Published属性的变化，否则属性更新时视图不会刷新。示例声明方式：
```
// 视图内部创建实例用@StateObject
@StateObject private var loader = GiphyLoader()
// 父视图传递过来的实例用@ObservedObject
@ObservedObject var loader: GiphyLoader
```
推荐直接用data数组驱动ForEach，避免单独维护numberOfRows带来的同步问题，修改视图中的循环部分：
```
ForEach(loader.data.indices, id: \.self) { index in
    Image("")
        .frame(width: 100, height: 100)
        .background(Color.random)
        .clipped()
}
```
这样data更新时，ForEach会自动响应变化，无需额外维护行数变量。