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

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

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

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

1、分享文本

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

swift 复制代码

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按钮视图类似，如下图所示：

scss 复制代码

// 传入参数值
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视图来显示图片内容，如下图所示：

arduino 复制代码

// 声明图片参数
private var image: Image = Image("cartoon_love")

// 显示图片
image
    .resizable()
    .scaledToFit()

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

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

arduino 复制代码

// 传入参数值
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图片转换器，可以直接实现将视图转换为图片。

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

scss 复制代码

// 显示分享视图
shareView()

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

        Text(content)
    }
    .padding()
}

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

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

swift 复制代码

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

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

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

less 复制代码

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

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

那如果当前项目使用的iOS16或以下版本，该怎么实现上述的功能呢？

4、新书推荐

《SwiftUI完全开发》是一本面向iOS独立开发者的经典教材，其作者（也就是我）原是一名产品经理，在机缘巧合之下学习SwiftUI，并最终成为一名优秀的iOS独立开发者。

本书以SwiftUI基础视图的使用场景出发，结合项目案例，帮助iOS初学者们快速了解SwiftUI，并真正动手开发规划、开发、上架一款iOS应用。

本书特色

从0到1保姆级教程，无论你是开发者还是编程小白，都可以从本书中实现从0开发一款App；

概念与实践结合，通过各种丰富的案例，来帮助读者快速了解SwiftUI开发；

全面覆盖日常项目开发的方方面面，除了传递iOS理论知识，更多地是帮助读者建立iOS开发认知；

现已全面上架京东、天猫、当当，你想开发专属于你的应用吗？来看看《SwiftUI完成开发》吧～