DynamicUI

通过 JSON 文件创建 SwiftUI 用户界面。JSON 文件将包含用户界面的结构，程序将根据 JSON 文件创建用户界面。

警告

这是一个正在进行中的项目，尚未准备好用于生产环境。
请随时贡献代码、报告问题或请求功能。

要求

Swift 5.9+ (Xcode 15+)
iOS 15+, macOS 12+, tvOS 14+, watchOS 7+, macCatalyst 15+, visionOS 1.0+

安装

使用 Swift Package Manager 安装

dependencies: [
    .package(url: "https://github.com/0xWDG/DynamicUI.git", branch: "main"),
],
targets: [
    .target(name: "MyTarget", dependencies: [
        .product(name: "DynamicUI", package: "DynamicUI"),
    ]),
]

并导入它

import DynamicUI

用法

import SwiftUI
import DynamicUI

struct ContentView: View {
    let json = """
    [
        {
            "type": "Text",
            "title": "Wait, am i generating views from JSON?",
            "modifiers": {"foregroundStyle":"red","opacity":0.6}
        },
        {
            "type": "Button",
            "title": "Click me",
            "eventHandler": "customHandler"
        },
        {
            "type": "Toggle",
            "title": "Toggle me",
            "identifier": "my.toggle.1"
        }
    ]
    """.data(using: .utf8)

    var body: some View {
        DynamicUI(
            json: json,
            callback: { component in
                // This contains everything passed as a component (type, title, identifier, ...)
                print(component)
            }
        )
    }
}

Playground 应用程序

在 Playground 目录下有一个 Xcode 项目用于构建 Playground 应用程序

支持的视图类型

请注意: 以 ⚠ 开头的项目可能会忽略传递的参数。
~~带有删除线的~~项目尚未支持。

VStack

{
    "type": "VStack",
    "children": [  ]
}

HStack

{
    "type": "HStack",
    "children": [  ]
}

ZStack

{
    "type": "ZStack",
    "children": [  ]
}

List

{
    "type": "List",
    "children": [  ]
}

ScrollView

{
    "type": "ScrollView",
    "children": [  ]
}

NavigationView

{
    "type": "NavigationView",
    "children": [  ]
}

Form

{
    "type": "Form",
    "children": [  ]
}

Button

{
    "type": "Button",
    "title": "Click me!"
}

Text

{
    "type": "Text",
    "title": "..."
}

Image

{
    "type": "Image",
    "imageURL": "systemName"
}

Divider

{
    "type": "Divider"
}

Spacer

{
    "type": "Spacer"
}

Label

{
    "type": "Label",
    "title": "..."
}

TextField

{
    "type": "TextField",
    "title": "...",
    "defaultValue": "..."
}

SecureField

{
    "type": "SecureField",
    "title": "...",
    "defaultValue": "..."
}

TextEditor

{
    "type": "TextEditor",
    "title": "...",
    "defaultValue": "..."
}

Toggle

{
    "type": "Toggle",
    "title": "Turn me on!",
    "defaultValue": true
}

⚠ Gauge

{
    "type": "Gauge",
    "title": "...",
    "defaultValue": 0.5
}

⚠ ProgressView

{
    "type": "ProgressView",
    "title": "...",
    "value": 50,
    "total": 100
}

Slider

{
    "type": "Slider",
    "title": "...",
    "minLabel": "min",
    "maxLabel": "max"
}

GroupBox

{
    "type": "GroupBox",
    "children": [ ]
}

DisclosureGroup

{
    "type": "DisclosureGroup",
    "children": [ ]
}

HSplitView

{
    "type": "HSplitView",
    "children": [ ]
}

VSplitView

{
    "type": "VSplitView",
    "children": [ ]
}

⚠ Picker

{
    "type": "Picker",
    "title": "...",
    "values": ["...", "..."]
}

~~⚠ NavigationSplitView~~

{
    "type": "NavigationSplitView",
    "children": [ ]
}

~~⚠ TabView~~

{
    "type": "TabView",
    "children": [ ]
}

Images

Playground

V0.0.1 实战演示

使用方

Aurora Editor 用于扩展中的自定义视图。

联系方式

🦋 @0xWDG 🐘 mastodon.social/@0xWDG 🐦 @0xWDG 🧵 @0xWDG 🌐 wesleydegroot.nl 🤖 Discord