SwiftUI 框架

透過 SwiftUI 的 ShareLink 來分享文本和圖像等資料

在 iOS 16 中,SwiftUI 帶來了一個新的視圖 ShareLink。使用者點擊 Share Link 時,視圖就會顯示一個 Share Sheet,讓使用者分享任何型別的資料到其他 App。在這篇文章中,我會帶大家使用 ShareLink,讓使用者分享文本、URL 和圖像。
透過 SwiftUI 的 ShareLink 來分享文本和圖像等資料
Photo by AltumCode on Unsplash
透過 SwiftUI 的 ShareLink 來分享文本和圖像等資料
Photo by AltumCode on Unsplash
In: SwiftUI 框架

iOS 16 中,SwiftUI 帶來了一個新的視圖 ShareLink。使用者點擊 Share Link 時,視圖就會顯示一個 Share Sheet,讓使用者可以分享內容到其他 App 或複製資料。

ShareLink 視圖可以分享任何型別的資料。在這篇教學文章中,我們會一起看看如何使用 ShareLink 讓使用者分享文本、URL 和圖像。

讓我們先看看以下例子。如果想建立一個 Share Link 來分享一個 URL,我們可以如此編寫程式碼:

struct ContentView: View {
    private let url = URL(string: "https://www.appcoda.com")!

    var body: some View {
        VStack {
            ShareLink(item: url)
        }
    }
}

SwiftUI 會自動顯示一個 Share 按鈕和小圖標。

sharelink-basic-for-swiftui

使用者點擊按鈕後,iOS 就會顯示一個 Share Sheet,讓使用者選擇下一步操作,例如複製、或是把 Link 添加到 Reminders。

swiftui-share-sheet

如果我們想分享文本,我們只需要把字串 (string) 傳遞到 item 參數 (parameter) 即可。

ShareLink(item: "Check out this new feature on iOS 16")

如果想客製化 Share Link 的外觀,我們可以在閉包 (closure) 中提供視圖內容:

ShareLink(item: url) {
    Image(systemName: "square.and.arrow.up")
}

在這個例子中,SwiftUI 就會只顯示 Share Link 的圖標。

swiftui-tap-and-share

或者,我們可以顯示一個 Label,並指定系統或客製化的圖像:

ShareLink(item: url) {
    Label("Tap me to share", systemImage:  "square.and.arrow.up")
}

在初始化 ShareLink 實例時,我們可以添加 2 個附加參數,以提供更多有關分享項目的資料:

ShareLink(item: url, subject: Text("Check out this link"), message: Text("If you want to learn Swift, take a look at this website.")) {
    Image(systemName: "square.and.arrow.up")
}

我們可以使用 subject 參數和 message 參數,分別為 URL 或想分享的項目添加 title 和描述。iOS 會根據使用者想要分享的途徑,去決定要顯示 subject、message、或是兩者都顯示。比如說,如果我們想要把 URL 添加到 Reminders,Reminders App 就會顯示預設的 message。

swiftui-sharelink-reminders

分享圖像

除了 URL 外,我們還可以利用 ShareLink 來分享圖像。讓我們看看以下的範例程式碼:

struct ContentView: View {
    private let photo = Image("bigben")

    var body: some View {
        VStack(alignment: .leading, spacing: 10) {
            photo
                .resizable()
                .scaledToFit()

            ShareLink(item: photo, preview: SharePreview("Big Ben", image: photo))

        }
        .padding(.horizontal)
    }
}

item 參數中,我們指定了要分享的圖像。另外,我們也傳遞了一個 SharePreview 的實例,來提供圖像的預覽。在預覽中,我們指定了圖像的 title 和 thumbnail。使用者點擊 Share 按鈕後,iOS 就會顯示一個有圖像預覽的 Share Sheet。

swiftui-sharelink-image

Conforming to Transferable

除了 URL 外,item 參數也接受任何遵從 Transferable 協定的物件。在 iOS 中,以下都是標準的 Transferable 型別:

  • String
  • Data
  • URL
  • Attributed String
  • Image
Transferable 協定可以用來描述型別如何與 Transport API 交互,例如拖放動作 (drag and drop)、或複製和貼上 (copy and paste)。

那我們如何讓一個客製物件變成 Transferable 呢?假設,我們建立了以下的 Photo 結構:

struct Photo: Identifiable {
    var id = UUID()
    var image: Image
    var caption: String
    var description: String
}

要讓 ShareLink 可以分享這個物件,我們就要讓 Photo 遵從 Transferable 協定,並實作 transferRepresentation 屬性 (property):

extension Photo: Transferable {
    static var transferRepresentation: some TransferRepresentation {
        ProxyRepresentation(exporting: \.image)
    }
}

我們有不同的 Transfer Representation,包括:ProxyRepresentationCodableRepresentationDataRepresentation、和 FileRepresentation。在以上的程式碼中,我們使用了 ProxyRepresentation,它會使用另一種型別的 Transfer Representation 作為自己的 Representation。 在這裡,我們使用了 Image 內建的 Transferable 協定。

swiftui-image-transferable

因為 Photo 現在遵從 Transferable 協定,我們就可以把 Photo 實例傳遞給 ShareLink

ShareLink(item: photo, preview: SharePreview(photo.caption, image: photo.image))

現在,當使用者點擊 Share 按鈕,App 就會顯示分享圖片的 Share Sheet。

下一篇文章

這篇教學文章教了大家如何使用 ShareLink 分享文本、URL、和圖像。事實上,只要型別遵從 Transferable 協定,我們都可以用這個新的視圖分享任何型別的資料。

要分享客製化型別,我們可以採用協定,並使用其中一個內建的 TransferRepresentation 型別,來提供 Transfer Representation。 我們簡單討論了 ProxyRepresentation 型別。如果我們想要在 App 之間分享一個文件,就可以使用 FileRepresentation 型別。我們會在之後的教學文章中,再深入探討這個題目。

譯者簡介:Kelly Chan-AppCoda 編輯小姐。
作者
Simon Ng
軟體工程師,AppCoda 創辦人。著有《iOS 17 App 程式設計實戰心法》、《iOS 17 App程式設計進階攻略》以及《精通SwiftUI》。曾任職於HSBC, FedEx等跨國企業,專責軟體開發、系統設計。2012年創立AppCoda技術部落格,定期發表iOS程式教學文章。現時專注發展AppCoda業務,致力於iOS程式教學、產品設計及開發。你可以到推特與我聯絡。
評論
更多來自 AppCoda 中文版
如何使用 Swift 整合 Google Gemini AI
SwiftUI 框架

如何使用 Swift 整合 Google Gemini AI

在即將到來的 WWDC,Apple 預計將會發佈一個本地端的大型語言模型 (LLM)。 接下來的 iOS SDK 版本將讓開發者更輕易地整合 AI 功能至他們的應用程式中。然而,當我們正在等待 Apple 推出自家的生成 AI 模型時,其他公司(如 OpenAI
很好! 你已成功註冊。
歡迎回來! 你已成功登入。
你已成功訂閱 AppCoda 中文版 電子報。
你的連結已失效。
成功! 請檢查你的電子郵件以獲取用於登入的連結。
好! 你的付費資料已更新。
你的付費方式並未更新。