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 18 App 程式設計實戰心法》、《iOS 18 App程式設計進階攻略》以及《精通SwiftUI》。曾任職於HSBC, FedEx等跨國企業,專責軟體開發、系統設計。2012年創立AppCoda技術部落格,定期發表iOS程式教學文章。現時專注發展AppCoda業務,致力於iOS程式教學、產品設計及開發。你可以到推特與我聯絡。
評論
更多來自 AppCoda 中文版
如何在 SwiftUI App 中開發 Live Activities
SwiftUI 框架

如何在 SwiftUI App 中開發 Live Activities

Live Activities 首次於 iOS 16 推出,是 Apple 最令人興奮的更新之一,能讓 App 與使用者在即時互動上更有連結。它不再需要使用者不斷打開 App,Live Activities 可以讓資訊直接顯示在鎖定畫面和 Dynamic Island 上。
使用 Tool Calling 強化 Foundation Models 功能
AI

使用 Tool Calling 強化 Foundation Models 功能

在前幾篇教學中,我們介紹了 Foundation Models 在 iOS 26 中的運作方式,以及如何使用這個全新框架打造具備 AI 功能的應用。我們也介紹了 @Generable 巨集,它能輕鬆地將模型回應轉換為結構化的 Swift 類型。 現在,在這個 Foundation
活用 Foundation Models 的 @Generable 與 @Guide 製作測驗 App
AI

活用 Foundation Models 的 @Generable 與 @Guide 製作測驗 App

在前一篇教學中,我們介紹了 Foundation Models 框架,並示範了如何用它來進行基本的內容生成。那個過程相當簡單——你提供一個提示詞(prompt),等幾秒鐘,就能獲得自然語言的回應。在我們的範例中,我們建立了一個簡單的問答 App,讓使用者可以提問,App 則直接顯示生成的文字。 但如果回應變得更複雜——你需要把非結構化文字轉換為結構化的物件呢? 舉例來說,
很好! 你已成功註冊。
歡迎回來! 你已成功登入。
你已成功訂閱 AppCoda 中文版 電子報。
你的連結已失效。
成功! 請檢查你的電子郵件以獲取用於登入的連結。
好! 你的付費資料已更新。
你的付費方式並未更新。