LinkPresentationを使用してSwiftUIでリンクメタデータをフェッチする方法は?

AndiAna

WWDC20や他の記事によると、特定のURLから画像のURLを取得するのは非常に簡単なようです。以下は私のスターターコードです。これは、URLのランダムなリストを一覧表示するだけで、URLのリッチリンクプレビュー用にimageurlをフェッチすることになっています。LPMetadataProviderを使用してメタデータをフェッチするだけです。しかし、画像のURLを表示することはできません。誰かがSwiftUIでそれがどのように行われるか知っていますか?

import SwiftUI
import LinkPresentation

struct ExampleHTTPLinks: View {
    var links = [ "https://www.google.com", "https://www.hotmail.com"]
    let metadataProvider = LPMetadataProvider()
    
    
    var body: some View {
        
        
        List(links, id:\.self) { item in
            HStack {
                Text(item)
                Image(systemName: "heart.fill")
                metadataProvider.startFetchingMetadata(for: URL(string: item)!) { metadata, error in
                  if error != nil {
                    // The fetch failed; handle the error.
                    // Examples: server doesn't respond, is too slow, user doesn't have network.
                    return
                  }
                 let linkView = LPLinkView(metadata: metadata)
                    Image(linkView.image)
                  // Make use of the fetched metadata.
                }
            }
        }
    }
}

struct ExampleHTTPLinks_Previews: PreviewProvider {
    static var previews: some View {
        ExampleHTTPLinks()
    }
}
jnpdx

動作するバージョンは次のとおりです。


class LinkViewModel : ObservableObject {
    let metadataProvider = LPMetadataProvider()
    
    @Published var metadata: LPLinkMetadata?
    @Published var image: UIImage?
    
    init(link : String) {
        guard let url = URL(string: link) else {
            return
        }
        metadataProvider.startFetchingMetadata(for: url) { (metadata, error) in
            guard error == nil else {
                assertionFailure("Error")
                return
            }
            DispatchQueue.main.async {
                self.metadata = metadata
            }
            guard let imageProvider = metadata?.imageProvider else { return }
            imageProvider.loadObject(ofClass: UIImage.self) { (image, error) in
                guard error == nil else {
                    // handle error
                    return
                }
                if let image = image as? UIImage {
                    // do something with image
                    DispatchQueue.main.async {
                        self.image = image
                    }
                } else {
                    print("no image available")
                }
            }
        }
    }
}

struct MetadataView : View {
    @StateObject var vm : LinkViewModel
    
    var body: some View {
        VStack {
            if let metadata = vm.metadata {
                Text(metadata.title ?? "")
            }
            if let uiImage = vm.image {
                Image(uiImage: uiImage)
                    .resizable()
                    .frame(width: 100, height: 100)
            }
        }
    }
}

struct ContentView: View {
    var links = [ "https://www.google.com", "https://www.hotmail.com"]
    let metadataProvider = LPMetadataProvider()
    
    var body: some View {
        List(links, id:\.self) { item in
            HStack {
                Text(item)
                Image(systemName: "heart.fill")
                MetadataView(vm: LinkViewModel(link: item))
            }
        }
    }
}

LPMetadataProviderを複数の呼び出しに使用しようとすると文句を言うので、ビューモデルに移動しました。

画像はNSImageProvider-によって販売されています-あなたはloadObject呼び出しがUIImageそれから抜け出すものであることがわかります

LPLinkViewAppleが提供する、すぐに使用できるプレゼンテーションを使用したい場合に使用できることに注意してください。それはだからUIView、SwiftUIでそれを使用するために、あなたがそれをラップする必要があると思いますUIViewRepresentable

struct LPLinkViewRepresented: UIViewRepresentable {
    var metadata: LPLinkMetadata
    
    func makeUIView(context: Context) -> LPLinkView {
        return LPLinkView(metadata: metadata)
    }
    
    func updateUIView(_ uiView: LPLinkView, context: Context) {
        
    }
}

struct MetadataView : View {
    @StateObject var vm : LinkViewModel
    
    var body: some View {
        if let metadata = vm.metadata {
            LPLinkViewRepresented(metadata: metadata)
        } else {
            EmptyView()
        }
    }
}

class LinkViewModel : ObservableObject {
    let metadataProvider = LPMetadataProvider()
    
    @Published var metadata: LPLinkMetadata?
    
    init(link : String) {
        guard let url = URL(string: link) else {
            return
        }
        metadataProvider.startFetchingMetadata(for: url) { (metadata, error) in
            guard error == nil else {
                assertionFailure("Error")
                return
            }
            DispatchQueue.main.async {
                self.metadata = metadata
            }
        }
    }
}

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

Androidで解析を使用して内部クエリを使用してデータをフェッチする方法は?

分類Dev

フックを使用して既存のreduxアクションでデータをフェッチする方法は?

分類Dev

useFocusEffectフックを使用してデータをフェッチする方法は?

分類Dev

URLのクエリパラメータを使用してretrofit2でデータをフェッチする方法は?

分類Dev

HyperledgerファブリックネットワークSDKを使用してチェーンコードメタデータをクエリする方法

分類Dev

reduxを使用してreactでデータをフェッチする方法は?

分類Dev

反応でAPIを使用してフェッチされたパラメータでhrefリンクを追加する方法は?

分類Dev

curlを使用してumlautドメインからデータをフェッチする方法は?

分類Dev

フェッチを使用してストリーミングデータを処理する方法は?

分類Dev

Spark:Cassandraクエリを使用してpysparkでcassandraからデータをフェッチする方法

分類Dev

Angular7でhttppostリクエストを使用してデータをフェッチする方法

分類Dev

PDOを使用してデータをフェッチする方法

分類Dev

フェッチを使用してデータを投稿する方法

分類Dev

クロスドメインデータをフェッチし、純粋なJavaScriptを使用して解析する方法は?

分類Dev

Arduinoを使用してNodeMcuのURLからリアルタイムデータをフェッチする方法は?

分類Dev

ボタンクリックで色とテキストを変更するためにngClassを使用しています。データはデータテーブルを使用してリモートサーバーからフェッチされます

分類Dev

tensorflowでカスタムPython関数を使用してデータをプリフェッチする方法

分類Dev

Pythonを使用してsqliteからデータをフェッチする方法は?

分類Dev

Springを使用しているときに、チェックスタイルメッセージ「ユーティリティクラスにデフォルトのパブリックコンストラクターを含めることはできません」を抑制する方法

分類Dev

PHPで日付条件を使用してデータをフェッチする方法

分類Dev

dotnetcoreでEntityFrameworkを使用してデータをフェッチする方法

分類Dev

JQuery 2.1.4を使用してチェックボックスをフィルタリングする方法は?

分類Dev

mongodbクエリで初期化された変数の値をインクリメントする方法とオブジェクトからデータをフェッチするために使用している初期化された値の変数

分類Dev

パラメータを使用してデータセットをフィルタリングする方法は?

分類Dev

JQueryを使用してチェックボックスでデータ属性でdivコンテンツをフィルタリングする

分類Dev

クラスはKotlinまたはJavaでリフレクションを使用して、インターフェイスからデフォルトのメソッドをオーバーライドしているかどうかを確認する方法?

分類Dev

sqliteでデータをフェッチして追加する方法

分類Dev

フェッチを使用してreactアプリでjsonデータをレンダリングする

分類Dev

パラメータを使用して整数値をPythonコネクタを使用してMySQLデータベースにフェッチする方法

Related 関連記事

  1. 1

    Androidで解析を使用して内部クエリを使用してデータをフェッチする方法は?

  2. 2

    フックを使用して既存のreduxアクションでデータをフェッチする方法は?

  3. 3

    useFocusEffectフックを使用してデータをフェッチする方法は?

  4. 4

    URLのクエリパラメータを使用してretrofit2でデータをフェッチする方法は?

  5. 5

    HyperledgerファブリックネットワークSDKを使用してチェーンコードメタデータをクエリする方法

  6. 6

    reduxを使用してreactでデータをフェッチする方法は?

  7. 7

    反応でAPIを使用してフェッチされたパラメータでhrefリンクを追加する方法は?

  8. 8

    curlを使用してumlautドメインからデータをフェッチする方法は?

  9. 9

    フェッチを使用してストリーミングデータを処理する方法は?

  10. 10

    Spark:Cassandraクエリを使用してpysparkでcassandraからデータをフェッチする方法

  11. 11

    Angular7でhttppostリクエストを使用してデータをフェッチする方法

  12. 12

    PDOを使用してデータをフェッチする方法

  13. 13

    フェッチを使用してデータを投稿する方法

  14. 14

    クロスドメインデータをフェッチし、純粋なJavaScriptを使用して解析する方法は?

  15. 15

    Arduinoを使用してNodeMcuのURLからリアルタイムデータをフェッチする方法は?

  16. 16

    ボタンクリックで色とテキストを変更するためにngClassを使用しています。データはデータテーブルを使用してリモートサーバーからフェッチされます

  17. 17

    tensorflowでカスタムPython関数を使用してデータをプリフェッチする方法

  18. 18

    Pythonを使用してsqliteからデータをフェッチする方法は?

  19. 19

    Springを使用しているときに、チェックスタイルメッセージ「ユーティリティクラスにデフォルトのパブリックコンストラクターを含めることはできません」を抑制する方法

  20. 20

    PHPで日付条件を使用してデータをフェッチする方法

  21. 21

    dotnetcoreでEntityFrameworkを使用してデータをフェッチする方法

  22. 22

    JQuery 2.1.4を使用してチェックボックスをフィルタリングする方法は?

  23. 23

    mongodbクエリで初期化された変数の値をインクリメントする方法とオブジェクトからデータをフェッチするために使用している初期化された値の変数

  24. 24

    パラメータを使用してデータセットをフィルタリングする方法は?

  25. 25

    JQueryを使用してチェックボックスでデータ属性でdivコンテンツをフィルタリングする

  26. 26

    クラスはKotlinまたはJavaでリフレクションを使用して、インターフェイスからデフォルトのメソッドをオーバーライドしているかどうかを確認する方法?

  27. 27

    sqliteでデータをフェッチして追加する方法

  28. 28

    フェッチを使用してreactアプリでjsonデータをレンダリングする

  29. 29

    パラメータを使用して整数値をPythonコネクタを使用してMySQLデータベースにフェッチする方法

ホットタグ

アーカイブ