SwiftUI极简教程43:ShareLink新视图，让你轻松实现文本和图片的分享

在以往项目中，我们想实现调用系统级别的“分享”功能时，常常需要借助UIKit框架的能力，这往往需要我们在学习SwiftUI框架的同时，还需要掌握前一种框架的特性，这可能也是影响SwiftUI在国内普及的重要原因。

而在iOS16版本中，SwiftUI框架中新增了一个新的视图— —ShareLink分享链接视图，通过该视图，我们可以很简单地使用SwiftUI实现文本、图片的分享。

那么现在，我们就来学习和尝试使用ShareLink分享链接视图，来实现一些简单的小案例。

1、分享文本

首先是分享的文本内容，我们声明文本内容，并且构建一个简单的显示文本的界面，如下图所示：

import SwiftUI
struct ContentView: View {
    private var content: String = "若逢新雪初霁，满月当空，下面平铺着皓影，上面流转着亮银，而你带笑的向我走来，月色与雪色之间，你是第三种绝色。"
    var body: some View {
        NavigationView {
            VStack {
                Text(content)
                	.padding()
            }
            .navigationBarTitle("首页", displayMode: .inline)
            .navigationBarItems(trailing: shareBtn())
        }
    }
    // 分享按钮
    private func shareBtn() -> some View {
        Image(systemName: "square.and.arrow.up")
    }
}

上述代码中，我们声明了一个String类型的文本参数content，并在主视图中显示出来。我们还为视图添加了顶部导航栏视图，并完善了标题和导航栏按钮的内容，其中，导航栏按钮为单独创建的视图shareBtn。

下一步，我们来实现分享文本文字的功能，需要使用到iOS16版本新增的ShareLink视图，使用方法和Button按钮视图类似，如下图所示：

// 传入参数值
shareBtn(content)
// 分享按钮
private func shareBtn(_ text:String) -> some View {
    ShareLink(item: text) {
        Image(systemName: "square.and.arrow.up")
    }
}

上述代码中，我们在shareBtn分享按钮视图的参数中创建了一个String类型的参数text，当传入text参数值后，调用ShareLink分享按钮视图的方法，将text的内容调用系统级操作进行分享。

是不是很简单？

2、分享图片

由于ShareLink支持多种类型，因此分享图片的方式也类似。我们在Assets资源库导入一张图片，如下图所示：

回到ContentView文件中，创建一个Image视图来显示图片内容，如下图所示：

// 声明图片参数
private var image: Image = Image("cartoon_love")
// 显示图片
image
    .resizable()
    .scaledToFit()

上述代码中，我们首先声明了图片参数image，用于获得本地的cartoon_love图片素材，随机在VStack垂直布局视图中添加image参数作为视图内容显示，并使用resizable修饰符和scaledToFit修饰符，使得图片素材自适应设备显示。

下一步，我们来实现分享图片的功能，使用方法和文本分享类似，如下图所示：

// 传入参数值
shareBtn(content,image)
// 分享按钮
private func shareBtn(_ text: String,_ image:Image) -> some View {
    ShareLink(
        item: image,
        preview: SharePreview("图片分享", image: image)
    ) {
        Image(systemName: "square.and.arrow.up")
    }
}

上述代码中，我们在shareBtn分享按钮视图的参数中创建了一个Image类型的参数image，用于传入图片内容。然后在ShareLink视图的参数中传入image参数值，除此之外，还需要设置SharePreview实例，用于预览图片分享效果。

分享图片也很简单，接下来我们增加点难度，我们需要将视图中的图片+文本作为一整个视图进行分享，那该如何实现？

3、分享视图

在iOS16版本中，除了新增ShareLink视图外，还新增了一个API— —ImageRenderer图片转换器，可以直接实现将视图转换为图片。

使用方式也比较简单，但首先，我们需要将需要分享的视图单独定义出来。如下图所示：

// 显示分享视图
shareView()
// 创建分享视图
private func shareView() -> some View {
    VStack(spacing: 48) {
        image
            .resizable()
            .scaledToFit()
        Text(content)
    }
    .padding()
}

上述代码中，我们单独创建了分享的组合视图shareView，并将原本主视图中的图片+文本的组合视图代码迁移到shareView视图中。完成后，我们就可以直接在其他地方调用shareView视图来显示shareView视图中的内容。

下面，我们就可以调用ImageRenderer图片转换器的API，将View视图转换为UIImage图片视图，如下所示：

// View->UIImage
@MainActor
private func generateSnapshot() -> UIImage {
    let renderer = ImageRenderer(content: shareView())
    return renderer.uiImage ?? UIImage()
}

上述代码中，我们创建了一个独立的方法generateSnapshot，并让其返回一个UIImage图片数据。在generateSnapshot方法中，我们调用ImageRenderer将shareView作为转换的对象，转换完成后以UIImage图片进行返回。

下面，我们来使用ShareLink视图实现视图的分享功能。如下代码所示：

ShareLink(
    item: Image(uiImage: generateSnapshot()),
    preview: SharePreview("视图分享", 
                          image: Image(uiImage: generateSnapshot()
                                      )
                         )
)

上述代码中，我们可以使用Image视图的uiImage参数解析generateSnapshot图片数据，就可以实现分享视图的功能啦～

当然你也可以更加精细化一点，比如指定视图尺寸大小，以达到最佳的展示效果。

如有其他问题，欢迎大家评论区一起交流~

由于近期工作和自己的事情太忙了，都没怎么写文章，深表抱歉～

最近有幸应邀写了本关于SwiftUI开发的书籍，趁着双11，给一直关注着我的亲们送下福利吧～

欢迎关注「文如秋雨」公众号，将随机抽取5本免费送～