✨ DeckUI

DeckUI 是一个 Swift DSL（领域特定语言），用于在 Xcode 中编写幻灯片。它允许您使用熟悉的语言和环境快速创建幻灯片和内容。

但是，为什么要用 DeckUI？

好吧，我做这个是因为

👉 在我的 YouTube 频道上观看 DeckUI 介绍 - 用 Swift 编写幻灯片，了解更多解释和完整演示

✨ 功能

🐌 未来功能

简单演示

import SwiftUI
import DeckUI

struct ContentView: View {
    var body: some View {
        Presenter(deck: self.deck)
    }
}

extension ContentView {
    var deck: Deck {
        Deck(title: "SomeConf 2023") {
            Slide(alignment: .center) {
                Title("Welcome to DeckUI")
            }

            Slide {
                Title("Quick Demo")
                Columns {
                    Column {
                        Bullets {
                            Words("Bullets")
                            Words("Words")
                            Words("Images")
                            Words("Columns")
                        }
                    }

                    Column {
                        Media(.remoteImage(URL(string: "https://www.fillmurray.com/g/200/300")!))
                    }
                }
            }
        }
    }
}
Screen.Recording.2022-09-08.at.12.40.41.AM.mov

💻 安装

Swift Package Manager

🚀 开始使用

目前还没有正式的“开始使用”文档😅 但请查看...

📖 文档

100% 尚未编写文档，但我会完成的 🤷‍♂️

🏎 性能

可能很糟糕，永远无法投入生产 😈 请仅将 DeckUI 用于单个演示，切勿在任何规模下使用。

👨‍💻 贡献

非常欢迎！我很乐意讨论问题并审查/合并 pull 请求 🙂 我会尽力回复，但我是一个父亲，在 RevenueCat 工作，并且是 fastlane 的主要维护者，所以我可能不会立即回复。

📚 示例

Slide

Slide 可以不带任何参数使用，但可以指定自定义的 alignment（对齐方式）、padding（内边距）和 theme（主题）。

Slide {
    // Content
}
Slide(alignment: .center, padding: 80, theme: .white) {
    // Content
}

Title

Title 可以单独使用，也可以与可选的 subtitle（副标题）一起使用。它与 Words 非常相似，但更大。

Slide(alignment: .center) {
    Title("Introducing...")
}
Slide {
    Title("Introduction", subtitle: "What is it?")
    // Content
}

Words

Words 类似于 Keynote、PowerPoint 或 Google Slides 中的文本框。最终会有更多用于单词的样式配置。

Slide(alignment: .center) {
    Title("Center alignment")
    Words("Slides can be center aligned")
    Words("And more words")
}

Bullets

Bullets 将 Words 转换为列表。它采用可选的 style（样式）参数，您可以在 .bullets（项目符号）和 .dash（破折号）之间进行选择。 Bullets 尚无法嵌套，但很快就会实现™️。

Slide {
    Title("Introduction", subtitle: "What is it?")
    Bullets {
        Words("A custom Swift DSL to make slide decks")
        Words("Distributed as a Swift Package")
        Words("Develop your slide deck in Xcode with Swift")
    }
}
Slide {
    Title("Introduction", subtitle: "What is it?")
    Bullets(style: .dash) {
        Words("A custom Swift DSL to make slide decks")
        Words("Distributed as a Swift Package")
        Words("Develop your slide deck in Xcode with Swift")
    }
}

Media

Media 提供了几种显示来自各种源类型的图像的方法。最终将支持视频。

Slide {
    Media(.assetImage("some-asset-name"))
    Media(.bundleImage("some-file-name.jpg"))
    Media(.remoteImage(URL(string: "http://placekitten.com/g/200/300"))!)
}

Columns

Columns 允许您使用一个到无数个 Column。将其他幻灯片内容放入 Column 中。

Slide {
    Title("Columns")
    Columns {
        Column {
            // Content
        }

        Column {
            // Content
        }
    }
}
Slide {
    Title("Columns")
    Columns {
        Column {
            // Content
        }

        Column {
            // Content
        }

        Column {
            // Content
        }

        Column {
            // Content
        }
    }
}

Code

Code 是 Words 的一个超级特定的版本。它将

Slide {
    Code("""
    struct ContentView: View {
        var body: some View {
            Text("Hello slides")
        }
    }
    """)
}
Slide {
    Code("""
    struct ContentView: View {
        var body: some View {
            Text("Hello slides")
        }
    }
    """, , enableHighlight: false)
}

RawView

将任何 SwiftUI 视图放入 RawView 中。可以是内置的 SwiftUI 视图，如 Text 或 Button，也可以是任何自定义 SwiftUI 视图。

Slide {
    RawView {
        CounterView()
    }
}

struct CounterView: View {
    @State var count = 0

    var body: some View {
        Button {
            self.count += 1
        } label: {
            Text("Press me - \(self.count)")
                .font(.system(size: 60))
                .padding(.horizontal, 40)
                .padding(.vertical, 20)
                .foregroundColor(.white)
                .overlay(
                    RoundedRectangle(cornerRadius: 25)
                    .stroke(Color.white, lineWidth: 2)
                )
        }.buttonStyle(.plain)
    }
}

Themes

可以在 Presenter 中或单独在 Slide 上设置 Theme。有三个默认主题（.dark，.black，.white），但您可以随意使用自己的主题。

struct ContentView: View {
    var body: some View {
        Presenter(deck: self.deck, showCamera: true)
    }
}

extension Theme {
    public static let venonat: Theme = Theme(
        background: Color(hex: "#624a7b"),
        title: Foreground(
            color: Color(hex: "#ff5a5a"),
            font: Font.system(size: 80,
                              weight: .bold,
                              design: .default)
        ),
        subtitle: Foreground(
            color: Color(hex: "#a48bbd"),
            font: Font.system(size: 50,
                              weight: .light,
                              design: .default).italic()
        ),
        body: Foreground(
            color: Color(hex: "#FFFFFF"),
            font: Font.system(size: 50,
                              weight: .regular,
                              design: .default)
        ),
        code: Foreground(
            color: Color(hex: "#FFFFFF"),
            font: Font.system(size: 26,
                              weight: .regular,
                              design: .monospaced)
        ),
        codeHighlighted: (Color(hex: "#312952"), Foreground(
            color: Color(hex: "#FFFFFF"),
            font: Font.system(size: 26,
                              weight: .heavy,
                              design: .monospaced)
        ))
    )
}

真实世界中的 DeckUI

  1. FullQueueDeveloper 在 GDG Omaha 上使用 Swish & Sh 介绍了“使用 Swift 推送到 App Store”！ 观看 YouTube 上的录像，并查看 GitHub 上的源代码。