在 iOS 16 中,SwiftUI 帶來了一個新的視圖 ShareLink
。使用者點擊 Share Link 時,視圖就會顯示一個 Share Sheet,讓使用者可以分享內容到其他 App 或複製資料。
ShareLink
視圖可以分享任何型別的資料。在這篇教學文章中,我們會一起看看如何使用 ShareLink
讓使用者分享文本、URL 和圖像。
ShareLink 的基礎使用
讓我們先看看以下例子。如果想建立一個 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 按鈕和小圖標。
使用者點擊按鈕後,iOS 就會顯示一個 Share Sheet,讓使用者選擇下一步操作,例如複製、或是把 Link 添加到 Reminders。
如果我們想分享文本,我們只需要把字串 (string) 傳遞到 item
參數 (parameter) 即可。
ShareLink(item: "Check out this new feature on iOS 16")
客製化 Share Link 的外觀
如果想客製化 Share Link 的外觀,我們可以在閉包 (closure) 中提供視圖內容:
ShareLink(item: url) {
Image(systemName: "square.and.arrow.up")
}
在這個例子中,SwiftUI 就會只顯示 Share Link 的圖標。
或者,我們可以顯示一個 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。
分享圖像
除了 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。
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,包括:ProxyRepresentation
、CodableRepresentation
、DataRepresentation
、和 FileRepresentation
。在以上的程式碼中,我們使用了 ProxyRepresentation
,它會使用另一種型別的 Transfer Representation 作為自己的 Representation。 在這裡,我們使用了 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
型別。我們會在之後的教學文章中,再深入探討這個題目。