SlideKit 使用 SwiftUI 创建演示幻灯片

介绍

制作演示幻灯片时使用什么？
是基调吗？还是幻灯片？
我曾经也喜欢 PowerPoint。
但是，作为一名工程师，我想在代码中实现幻灯片。
在这种想法的推动下，您可以使用 SwiftUI 创建演示幻灯片幻灯片套件我创建了一个名为
本文介绍了如何使用 SlideKit。

SwiftUIでプレゼンスライドが作れるSlideKit

基本用法

设置

好吧，首先您需要准备一个应用程序来显示幻灯片。
在这里，要使用 SlideKit 生成幻灯片应用程序，幻灯片生成器利用
SlideGen 很容易与薄荷一起使用。
（对了，这个SlideGen也是我自己实现的）

$ mint run mtj0928/SlideGen SlideKitPresentation --platform macOS

运行此命令将生成一个幻灯片应用程序模板作为名为 SlideKitPresentation 的 xcodeproj。
如果将macOS 传递给platform 更改为iOS，则会生成适用于iOS 的xcodeproj，但本文将重点关注macOS。

现在，当您尝试构建刚刚创建的项目时，您将看到这样的屏幕。
SwiftUIでプレゼンスライドが作れるSlideKit

可能会有一些黑边，但如果您调整窗口大小，它应该会自动调整到适当的纵横比。

设置现已完成。
从这里我们将实际创建幻灯片。

如何制作幻灯片

首先，我们将创建一个简单的幻灯片。
添加一个名为 IntroductionSlide.swift 的文件，如下所示：

import SwiftUI
import SlideKit

struct IntroductionSlide: Slide { // ① 準拠するのはViewではなくSlide
    var body: some View {
        // ② HeaderSlideは一番上にタイトルがあるスライドのテンプレート
        HeaderSlide("SlideKit") {
            // ③ Itemを使うと楽に箇条書きができる
            Item("SlideKitはSwiftUIでスライドが作れるライブラリです")
            Item("ネストしたり、数字で箇条書きにもしたりもできます") {
                Item("1つ目のアイテム", accessory: 1) {
                    Item("ネストのネストもできます", accessory: "a")
                }
                Item("2つ目のアイテム", accessory: 2)
                Item("3つ目のアイテム", accessory: 3)
            }
        }
    }
}

struct IntroductionSlide__Previews: PreviewProvider {
    static var previews: some View {
        // ④ XcodePreviewを使う時はSlidePreviewをで囲むと適切な形になります
        SlidePreview {
            IntroductionSlide()
        }
    }
}

使用 SlideKit 创建的幻灯片可以使用 XcodePreview 检查。
对于上面的代码，它应该是这样的。

SwiftUIでプレゼンスライドが作れるSlideKit

我在代码中放了注释，所以我想你可以大致了解内容，但HeaderSlide 和Item 制作项目符号幻灯片。

将幻灯片添加到您的应用程序

现在，上面的IntroductionSlide可以在XcodePreview中确认了，但是在app执行的时候还是没有显示出来。
您需要注册SlideIndexController 才能在应用程序中以幻灯片形式查看。
我在 SlideGen 生成的项目中有一个名为 SlideConfiguration.swift 的文件。
SlideIndexController 在该文件中生成，因此添加之前添加的 IntroductionSlide。

import SwiftUI
import SlideKit

struct SlideConfiguration {
    // ...省略
    let slideIndexController = SlideIndexController {
        IntroductionSlide()  // ← この一行を追加する
        SampleSlide()
    }
}

当您构建应用程序时，您之前创建的IntroductionSlide 将显示在应用程序中。
添加到此SlideIndexController 的幻灯片从顶部按顺序显示。
您可以通过按 Return 键或按右箭头键转换到下一张幻灯片。
相反，您可以通过按左箭头键返回上一张幻灯片。

通过幻灯片取得进展

使用幻灯片演示时，您可能希望逐步显示幻灯片。
SlideKit 涵盖了此类用例。
返回到您刚刚创建的IntroductionSlide 并对其进行编辑以读取：

struct IntroductionSlide: Slide {    
    enum SlidePhasedState: Int, PhasedState { // 型名が違うとコンパイルエラーになるので注意
        case initial, secondItem, all
    }

    @Phase var phasedStateStore: PhasedStateStore<SlidePhasedState> // 変数名が違うとコンパイルエラーになるので注意
   
    var body: some View {
        //省略
    }
}

要显示的阶段由枚举SlidePhasedState 表示。
PhasedState 符合 SlidePhasedState 需要 .initial。
这是显示幻灯片的第一阶段。
phasedStateStore 现在有 SlidePhasedState。
phasedStateStore 具有返回 Bools 的方法，例如 after(_) 和 when(_)，因此您可以使用它们根据当前状态分支 body 的内容。

var body: some View {
    if phasedStateStore.when(.secondItem) { 
        // 現在の状態がsecondItemの時だけここに入る
    }
    if phasedStateStore.after(.secondItem) {
        // 現在の状態がsecondItem以降の時にここに入る
    }
}

现在添加到您之前添加的IntroductionSlide。

struct IntroductionSlide: Slide {
    // ... 省略
    var body: some View {
        HeaderSlide("SlideKit") {
            Item("SlideKitはSwiftUIでスライドが作れるライブラリです")
            if phasedStateStore.after(.secondItem) {
                Item("ネストしたり、数字で箇条書きにもしたりもできます") {
                    if phasedStateStore.after(.all) {
                        Item("1つ目のアイテム", accessory: 1) {
                            Item("ネストのネストもできます", accessory: "a")
                        }
                        Item("2つ目のアイテム", accessory: 2)
                        Item("3つ目のアイテム", accessory: 3)
                    }
                }
            }
        }
    }
}

通过构建它并在幻灯片中前进，您可以看到它是逐步显示的。

SwiftUIでプレゼンスライドが作れるSlideKit
SwiftUIでプレゼンスライドが作れるSlideKit
SwiftUIでプレゼンスライドが作れるSlideKit

使用演示者工具

当您进行演示时，您希望看到脚本。
SlideKit 也支持这样的用例。
Slide 协议具有属性script。
默认情况下，它是一个空字符串，但您可以对其进行自定义，以便在演示过程中看到脚本。

struct IntroductionSlide: Slide {
    // ... 省略
    var script: String {
        switch phasedStateStore.current {
        case .initial:
            return """
            SlideKitについて紹介します
            SlideKitはSwiftUIでスライドが作れるライブラリです
            今皆さんが見ているようにヘッダーを持つスライドを作れ、箇条書きにも対応しています。
            """
        case .secondItem:
            return """
            さらに実はネストしたり、数字の箇条書きしたりできます。
            """
        case .all:
            return """
            こんな感じですね
            """
        }
    }
}

这个脚本可以通过启动应用程序并按⌘ + P 来查看。
SwiftUIでプレゼンスライドが作れるSlideKit

它将显示为与您正在演示的窗口不同的窗口，因此如果您在 Zoom 等上演示时仅共享演示幻灯片的窗口，则无需担心脚本被看到。

隐藏页码

您是否注意到显示的幻灯片的右下角有一个页码？
SlideKit 会自动显示此页码。
但是，有时，例如标题幻灯片，您不想显示页码。
Slide 协议具有 shouldHideIndex 属性。
此属性默认为false，但您可以通过将此值设置为true 来隐藏页码。

struct IntroductionSlide: Slide {
    // ... 省略
    var shouldHideIndex: Bool {
        true
    }
}

查看源代码

有时您可能希望在演示文稿幻灯片上显示排序代码。
SlideKit 有一个名为Code 的视图。
仅限 Swift，但 Code 支持语法高亮显示。
（公关等待支持其他语言！）

struct CodeSlide: Slide {
    var body: some View {
        HeaderSlide("Code Slide") {
            Text("シンタックスハイライトもサポート！")
            Code(code, fontSize: 32)
        }
    }
}

private let code = """
struct CodeSlide: Slide {
    var body: some View {
        HeaderSlide("Code Slide") {
            Text("シンタックスハイライトもサポート！")
            Code(code, fontSize: 32)
        }
    }
}
"""

struct CodeSlide_Previews: PreviewProvider {
    static var previews: some View {
        SlidePreview {
            CodeSlide()
        }
    }
}

SwiftUIでプレゼンスライドが作れるSlideKit

也可以使用深色主题。 （我稍后会添加背景颜色?）

Code(code, colorTheme: .defaultDark, fontSize: 32)
    .frame(maxWidth: .infinity, alignment: .leading)
    .padding(48)
    .background(Color.init(red: 41 / 255, green: 42 / 255, blue: 47 / 255))

SwiftUIでプレゼンスライドが作れるSlideKit

更改幻灯片主题

SlideKit 有HeaderSlide 和Item 等实用功能。
SlideKit 有一个功能，可以让您自由更改以下三种设计。

  • HeaderSlide
  • Item
  • 页码

这里我们将更改HeaderSlide的设计。
首先，准备一张简单的幻灯片。

struct CustomThemeSlide: Slide {
    var body: some View {
        HeaderSlide("スライドのテーマ") {
            Item("SlideKitはカスタムテーマに対応しています")
            Item("HeaderSlideStyleを使います")
        }
    }
}

struct CustomThemeSlide_Previews: PreviewProvider {
    static var previews: some View {
        SlidePreview {
            CustomThemeSlide()
        }
    }
}

这张幻灯片将如下所示：
SwiftUIでプレゼンスライドが作れるSlideKit

首先添加CustomHeaderSlideStyle。

struct CustomHeaderSlideStyle: HeaderSlideStyle {
    func makeBody(configuration: Configuration) -> some View {
        VStack {
            configuration.header
            configuration.content
        }
    }
}

并将其添加到之前的CustomThemeSlide_Previews。

struct CustomThemeSlide_Previews: PreviewProvider {
    static var previews: some View {
        SlidePreview {
            CustomThemeSlide()
        }
        .headerSlideStyle(CustomHeaderSlideStyle()) // この行に追加する
    }
}

然后 XcodePreview 看起来像这样。
SwiftUIでプレゼンスライドが作れるSlideKit

这是一个不合理的设计，不是吗？美好的。
我将在这里解释CustomHeaderSlideStyle。

struct CustomHeaderSlideStyle: HeaderSlideStyle {
    func makeBody(configuration: Configuration) -> some View {
        VStack {
            configuration.header // ① スライドのヘッダー
            configuration.content // ② スライドのコンテンツ
        }
    }
}

它的实现思路与 SwiftUI 的LabelStyle 相同。
configuration 包含HeaderSlide 的标题和内容。
基于此，我将更改幻灯片的设计。

struct CustomHeaderSlideStyle: HeaderSlideStyle {
    func makeBody(configuration: Configuration) -> some View {
        HStack(alignment: .center) {
            configuration.header
                .font(.system(size: 60, weight: .black))
                .frame(width: 640)
                .frame(maxHeight: .infinity, alignment: .leading)
                .foregroundColor(.white)
                .background(.red)
            VStack(alignment: .leading, spacing: 60) {
                configuration.content
                    .font(.system(size: 48))
            }
            .padding(60)
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)
    }
}

此执行的结果是：
SwiftUIでプレゼンスライドが作れるSlideKit

这是一个与以前完全不同的设计。
这里我们更改了HeaderSlide 的设计，但同样我们将自定义ItemStyle 用于Item 和IndexStyle 用于页码设计。

顺便说一句，很难将此CustomHeaderSlideStyle 应用于每张幻灯片。
要将其应用于整个幻灯片，请将其应用于 SlideGen 生成的SlideKitPresentationApp 的presentationContentView 属性，它将应用于整个幻灯片。
（SlideKitPresentationApp 的确切名称将根据生成 SlideGen 时传递的参数而有所不同。）

@main
struct SlideKitPresentationApp: App {
    // 省略...
    var presentationContentView: some View {
        SlideRouterView(slideIndexController: Self.configuration.slideIndexController)
            .headerSlideStyle(CustomHeaderSlideStyle()) // この一行を追加する
            .background(.white)
            .foregroundColor(.black)
    }
    // 省略...
}

只需添加上面的行，它将适用于所有幻灯片，现有的幻灯片将像这样重新设计。
SwiftUIでプレゼンスライドが作れるSlideKit
你的印象完全改变了。

实现标题幻灯片

到目前为止，我们已经使用HeaderSlide 实现了幻灯片，但不强制单独使用HeaderSlide。
使用 SlideKit，您可以通过组合 SwiftUI 提供的各种 View 来创建幻灯片。
最后，我们将实现标题幻灯片。

struct TitleSlide: Slide {
    var body: some View {
        VStack {
            titleText
                .frame(maxWidth: .infinity, alignment: .leading)
                .padding(90)
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .leading)
        .background(.red)
        .foregroundColor(.white)
    }

    var titleText: Text {
        Text("SwiftUI")
            .font(.system(size: 90, weight: .heavy))
        + Text(" で
")
            .font(.system(size: 70, weight: .heavy))
        + Text("プレゼンスライド")
            .font(.system(size: 90, weight: .heavy))
        + Text(" が ")
            .font(.system(size: 70, weight: .heavy))
        + Text("作れる
")
            .font(.system(size: 90, weight: .heavy))
        + Text("SlideKit")
            .font(.system(size: 190, weight: .heavy))
    }

    var shouldHideIndex: Bool { true }
}

围绕文本的操作很困难，但这张幻灯片看起来像这样。
SwiftUIでプレゼンスライドが作れるSlideKit
这样一来，不用HeaderSlide或Item，你可以使用SwiftUI Views更自由地设计幻灯片。

SlideKit 的优点

1.幻灯片可以重复使用！

在 PowerPoint 和 Keynote 中，必须复制和粘贴幻灯片才能再次显示它们。
但是，当我更改其中一张幻灯片时，我不得不编辑另一张，这使得保持同步变得困难。 （其实我也可以，只是不知道……）
但是，SlideKit 的幻灯片只是结构体，因此您可以根据需要多次使用它们并在一个地方更改它们。
此外，您可以像幻灯片一样轻松管理颜色。

2. 使用 SwiftUI，一旦实现就可以做任何事情

由于它只是 SwiftUI，一旦实现，你可以做很多 PowerPoint 和 Keynote 做不到的事情。
例如你可以做

  • 在幻灯片中嵌入应用程序演示
  • 如果你有要介绍的网页，在WebView中显示
  • 使用 Swift Charts 绘制图表
  • 如果有事件标签，请从 Twitter 中提取并在幻灯片中显示
  • 与 Firebase 合作的实时问卷等

我只能想出这么多，但是您仍然可以根据自己的想法在幻灯片中放置各种内容。

SlideKit 的细微之处

1.精细设计调整困难

SlideKit 还没有 Keynote 和 PowerPoint 认为理所当然的气泡和箭头等设计。
此外，显示此类内容时很难调整位置，因为它不直观。

2.无法转换为PDF

我认为很多人将幻灯片作为 PDF 共享，但 SlideKit 还没有将幻灯片转换为 PDF 的功能。
如果使用iOS16/macOS13新添加的ImageRenderer，可以将SwiftUI View转成图片生成PDF，但字符信息等难免会丢失。
请让我知道是否有更好的方法。

在最后

在本文中，您可以使用 SwiftUI 创建幻灯片幻灯片套件被介绍了。
其实和这篇文章是一样的，在DocC里面做的教程，所以如果您想了解更详细的步骤，请同时参考。

如果有人尝试使用 SlideKit 制作幻灯片，请告诉我！
幻灯片套件我们期待您的明星和贡献！


原创声明：本文系作者授权爱码网发表，未经许可，不得转载;

原文地址：https://www.likecs.com/show-308630928.html

相关文章：

猜你喜欢
相关资源
相似解决方案
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode