네트워크 URL에서 SwiftUI 이미지 가져오기 및 표시

7122 단어 SwiftiOS

개요


네트워크 등에서 SwiftUI의 이미지 데이터를 가져와 묘사하는 방법에 대한 설명입니다.
오해가 있다면 꼭 지적해 주세요.

방법


ObservedObject를 사용하여 데이터 업데이트 알림
https://developer.apple.com/documentation/swiftui/state-and-data-flow
1. 계승ObservableObject의 데이터 모델 만들기
2. 데이터 업데이트를 받은 View 속성에 1에 생성된 데이터 모델 추가@ObservedObject3.1에 생성된 데이터 모델에 UIIMage 속성을 추가하고 추가@Published데이터 모델 측면

/// ObservableObjectを継承したデータモデルを作る
final class ImageContainer: ObservableObject {

    // @PublishedをつけるとSwiftUIのViewへデータが更新されたことを通知してくれる
    @Published var image = UIImage(systemName: "photo")!

    init(from resource: URL) {
        // ネットワークから画像データ取得
        let session = URLSession(configuration: .default)
        let task = session.dataTask(with: resource, completionHandler: { [weak self] data, _, _ in
            guard let imageData = data,
                let networkImage = UIImage(data: imageData) else {
                return
            }

            DispatchQueue.main.async {
                // 宣言時に@Publishedを付けているので、プロパティを更新すればView側に更新が通知される
                self?.image = networkImage
            }
            session.invalidateAndCancel()
        })
        task.resume()
    }
}
측면 보기
struct ContentView: View {
    // 監視対象にしたいデータに@ObservedObjectをつける。
    @ObservedObject var container: ImageContainer

    var body: some View {
        Image(uiImage: container.image)
    }
}

해설


※ 여기에 기재된 내용을 참조하여 하고 있는 일을 적으세요.
https://developer.apple.com/documentation/swiftui/managing-model-data-in-your-app
모델 클래스(이 예에서 ImageContainer)의 데이터가 변경되면 모델 클래스는 SwiftUI에 반영되려면 상속 ObservableObject 되어야 합니다.
To make the data changes in your model visible to SwiftUI, adopt the ObservableObject protocol for model classes.

final class ImageContainer: ObservableObject { ... }
이 모델 클래스에 속성을 추가@Published하면 속성이 업데이트될 때 알림을 보낼 수 있습니다.
To publish a property, add the Published attribute to the property’s declaration:

final class ImageContainer: ObservableObject {
    @Published var image: UIImage
}
SwiftUI 측면에서 업데이트를 모니터링하려면 치수 지정@ObservableObject하고 속성을 선언합니다.
To tell SwiftUI to monitor an observable object, add the ObservedObject attribute to the property’s declaration

struct ContentView: View {
    @ObservedObject var container: ImageContainer
}
ImageContainer에서 네트워크를 통해 이미지를 완성var image: UIImage모니터링ImageContainer의 SwiftUI 측면에 업데이트 알림이 표시됩니다.

참조 정보


이 보도도 매우 참고할 만하다.
https://qiita.com/shiz/items/6eaf87fa79499623306a

좋은 웹페이지 즐겨찾기