QMLQT QUICK · C++ · PYTHON
QML 컴포넌트, 공통 디자인 토큰과 직접 실행할 수 있는 예제로 데스크톱 화면을 만드세요.
QML Core는 별도 제품입니다. C++와 Python에서 같은 QML 화면을 사용합니다.
QML CORE
56개 컴포넌트 중 56개
START WITH A WORKING APP
SDK 압축을 풀고 플러그인 버전과 호환되는 Qt 키트로 빌드하세요.
cmake -S examples/cmake-app -B build -G Ninja -DCMAKE_BUILD_TYPE=Release -DCMAKE_PREFIX_PATH=C:/Qt/6.12.0/msvc2022_64 -DCMAKE_MSVC_DEBUG_INFORMATION_FORMAT=Embedded -DCMAKE_POLICY_DEFAULT_CMP0141=NEW
cmake --build build
build/syidax-example --license your.license.json --example workbench순수 QML 버전을 사용하고 Python 바인딩을 명시적으로 선택하세요.
python -m venv .venv
.venv/Scripts/python -m pip install -r examples/python-app/requirements-pyside6.txt
.venv/Scripts/python examples/python-app/main.py --binding pyside6 --license your.license.json --example records--diagnose --json으로 Qt 버전, import 경로, 폰트, 실행 상태와 라이선스를 점검하세요. 라이선스 토큰은 출력하지 않습니다.
Gallery 평가 앱을 지금 사용할 수 있습니다. 유료 SDK 판매와 다운로드는 준비 중입니다. 위 설치 예제는 SDK 출시 후 사용하는 방법입니다.
아래 버전에서 네이티브 창과 예제의 기본 실행을 검사했습니다. Qt 6.8은 소스 최소 기준이며 모든 Qt 버전의 검증을 뜻하지 않습니다. Gallery는 software 렌더러를 사용합니다.
실행 중인 Windows 앱을 단계별로 캡처했습니다. 재생·일시 정지로 각 상태를 살펴보세요.
TRY IT YOURSELF
Windows 앱에서 예제를 실행하고 속성을 살펴보며 밝은 테마와 어두운 테마를 전환하세요. Gallery는 평가용이며 상업용 SDK는 별도 제품입니다.
Gallery 다운로드 · Windows x64$24.99 / 월
$249.99 / 년 · 개발자 1명 기준
Chart와 동일한 정규 단가입니다. 첫 구매·추가 좌석·갱신에 같은 가격이 적용됩니다.
문서, 실행 가능한 예제와 진단 도구를 제공합니다. 개별 기술 지원, 온보딩, SLA는 제공하지 않습니다.
구매 및 라이선스 조건 보기 →--qml 경로가 Syidax 폴더를 포함하는지 확인하세요. Python에서는 qml-pure를 사용합니다. 소스 저장소가 아닌 압축 해제한 SDK를 기준으로 실행하세요.
QML Core 인증서를 다시 다운로드한 뒤 --license로 전달하세요. Web Core·Chart·Grid 인증서는 QML을 활성화하지 않습니다. 월간 만료 시 사용이 종료되며, 연간은 이용 기간 내 출시 버전에 한해 보유 권한이 적용됩니다.
플러그인 빌드의 Qt 버전과 아키텍처를 확인하세요. 서로 다른 Python Qt 바인딩을 혼용하지 마세요. qml-pure로 플러그인 ABI 의존성을 피할 수 있습니다.
PDF는 별도 QtQuick.Pdf 모듈이 필요합니다. 이 모듈이 없어도 나머지 Core 컴포넌트는 사용 가능합니다. 아이콘 팩 등록과 리소스 경로는 SDK의 ICON-PACKS 문서를 확인하세요.
예제는 사용자 앱 데이터 폴더에만 저장합니다. 권한과 디스크 공간을 확인하세요. 잘못된 JSON은 백업한 뒤 초기 데이터로 복구됩니다. 저장 실패 시 입력 값이 유지됩니다.
실행 중인 QML 예제와 소스 코드를 함께 보여 줍니다. 문법 강조와 복사 기능이 있는 코드 영역만 따로 사용할 수도 있습니다.
import Syidax.Core.CodeViewer
| 타입 | 정의 / 역할 |
|---|---|
| SyCodeRender 실행 화면과 접을 수 있는 SyCodeScript 코드 패널을 묶습니다. | |
| 예제의 실제 QML 콘텐츠를 담고 source로 표시할 코드를 제공합니다. | |
| 구문 강조·선택적 줄 번호·복사 버튼을 갖춘 소스 코드 패널입니다. |
미리보기는 Qt 실행 화면의 이미지입니다. 아래 버튼으로 결과를 전환하세요.
SyCodeViewer는 살아 있는 아이템과 그 소스를 함께 보여 줍니다: 테두리 박스 위쪽에 SyCodeRender(안에 선언한 아이템을 그대로 그림), *SOURCE* 바, 그 아래에 SyCodeScript(코드를 language로 토큰화해 줄 단위로 그리며 선택적인 줄 번호 거터, 강조 줄, 복사 버튼을 갖춤).
import QtQuick
import Syidax.Core
Item {
implicitWidth: Math.max(360, childrenRect.width)
implicitHeight: childrenRect.height
id: story
property QtObject settings: QtObject {
id: storyArgs
property string language: "qml"
property bool showLineNumbers: true
property bool showCopyButton: true
property bool wrap: false
property string highlightLines: "2"
property bool collapsible: true
property bool defaultExpanded: true
property string triggerLabel: "SOURCE"
}
readonly property string sample: "Row {\n spacing: 8\n SyButton { text: " + JSON.stringify("저장") + "; variant: \"primary\" }\n SyTag { text: " + JSON.stringify("초안") + "; color: \"yellow\" }\n}"
SyCodeViewer {
width: 520
language: storyArgs.language
showLineNumbers: storyArgs.showLineNumbers
showCopyButton: storyArgs.showCopyButton
wrap: storyArgs.wrap
highlightLines: storyArgs.highlightLines
collapsible: storyArgs.collapsible
defaultExpanded: storyArgs.defaultExpanded
triggerLabel: storyArgs.triggerLabel
SyCodeRender {
source: story.sample
Row {
spacing: 8
SyButton { text: "저장"; variant: "primary" }
SyTag { text: "초안"; color: "yellow" }
}
}
SyCodeScript { }
}
}SyCodeScript는 읽기 전용 코드 패널로 단독으로 동작합니다.
import QtQuick
import Syidax.Core
Item {
implicitWidth: Math.max(360, childrenRect.width)
implicitHeight: childrenRect.height
// Focused Gallery routes: keep only the selected API and its prerequisites.
id: story
readonly property string js: "const total = items.reduce((sum, i) => sum + i.price, 0) // in cents\nrender(`Total: ${total / 100}`)"
readonly property string html: "<section class=\"card\">\n <h2 id=\"title\">Orders</h2>\n <!-- rows -->\n</section>"
readonly property string css: ".card {\n --gap: 8px;\n padding: var(--gap) 12px;\n color: #1f2937;\n}"
readonly property string json: "{ \"id\": 42, \"name\": \"Lee\", \"active\": true, \"tags\": [\"core\", \"qml\"] }"
Column {
spacing: 12
SyCodeScript { id: featureTarget0; width: 520; language: "javascript"; showLineNumbers: true; code: story.js }
SyCodeScript { id: featureTarget1; width: 520; language: "html"; code: story.html }
SyCodeScript { id: featureTarget2; width: 520; language: "css"; highlightLines: "2"; code: story.css }
SyCodeScript { id: featureTarget3; width: 520; language: "json"; showCopyButton: false; code: story.json }
}
}뷰어의 시그널:
import QtQuick
import Syidax.Core
Item {
component EventLog: Rectangle {
id: logBox
property var lines: []
implicitWidth: 440
implicitHeight: Math.max(56, logText.implicitHeight + 24)
radius: 4; color: Theme.semantic.backgroundBold
function log(value) { lines = lines.slice(-3).concat([String(value)]) }
Text {
id: logText; x: 12; y: 12; width: parent.width - 24
text: logBox.lines.length ? logBox.lines.join("\n") : "컨트롤을 조작하면 이벤트 결과가 표시됩니다."
wrapMode: Text.Wrap; color: Theme.semantic.textDefault
font.family: Theme.monoFontFamily; font.pixelSize: 12
}
}
implicitWidth: Math.max(360, childrenRect.width)
implicitHeight: childrenRect.height
// Focused Gallery routes: keep only the selected API and its prerequisites.
id: story
readonly property string sample: "SyButton { text: " + JSON.stringify("저장") + " }"
Column {
spacing: 12
SyCodeViewer {
id: viewer
width: 520; language: "qml"; showLineNumbers: true
onReady: (detail) => { if (true) { output.log(("ready: render %1, script %2").arg(detail.hasRender).arg(detail.hasScript)) } }
onExpandedChanged: { if (true) { output.log(("expanded: %1 (%2)").arg(viewer.expanded).arg(viewer.lastExpandSource)) } }
SyCodeRender { source: story.sample; SyButton { text: "저장" } }
SyCodeScript {
onLineClick: (detail) => { if (true) { output.log(("lineClick: %1").arg(detail.line)) } }
onCopied: (detail) => { if (true) { output.log(("copied: %1").arg(detail.language)) } }
}
}
EventLog { id: output }
}
}highlightLines 설정을 적용한 강조할 코드 줄 예제입니다.
import QtQuick
import Syidax.Core
Item {
implicitWidth: Math.max(360, childrenRect.width)
implicitHeight: childrenRect.height
id: story
property QtObject settings: QtObject {
id: storyArgs
property string language: "qml"
property bool showLineNumbers: true
property bool showCopyButton: true
property bool wrap: false
property string highlightLines: "2,4"
property bool collapsible: true
property bool defaultExpanded: true
property string triggerLabel: "SOURCE"
}
readonly property string sample: "Row {\n spacing: 8\n SyButton { text: " + JSON.stringify("저장") + "; variant: \"primary\" }\n SyTag { text: " + JSON.stringify("초안") + "; color: \"yellow\" }\n}"
SyCodeViewer {
width: 520
language: storyArgs.language
showLineNumbers: storyArgs.showLineNumbers
showCopyButton: storyArgs.showCopyButton
wrap: storyArgs.wrap
highlightLines: storyArgs.highlightLines
collapsible: storyArgs.collapsible
defaultExpanded: storyArgs.defaultExpanded
triggerLabel: storyArgs.triggerLabel
SyCodeRender {
source: story.sample
Row {
spacing: 8
SyButton { text: "저장"; variant: "primary" }
SyTag { text: "초안"; color: "yellow" }
}
}
SyCodeScript { }
}
}collapsible · defaultExpanded 설정을 적용한 접힌 상태로 시작 예제입니다.
import QtQuick
import Syidax.Core
Item {
implicitWidth: Math.max(360, childrenRect.width)
implicitHeight: childrenRect.height
id: story
property QtObject settings: QtObject {
id: storyArgs
property string language: "qml"
property bool showLineNumbers: true
property bool showCopyButton: true
property bool wrap: false
property string highlightLines: "2"
property bool collapsible: true
property bool defaultExpanded: false
property string triggerLabel: "SOURCE"
}
readonly property string sample: "Row {\n spacing: 8\n SyButton { text: " + JSON.stringify("저장") + "; variant: \"primary\" }\n SyTag { text: " + JSON.stringify("초안") + "; color: \"yellow\" }\n}"
SyCodeViewer {
width: 520
language: storyArgs.language
showLineNumbers: storyArgs.showLineNumbers
showCopyButton: storyArgs.showCopyButton
wrap: storyArgs.wrap
highlightLines: storyArgs.highlightLines
collapsible: storyArgs.collapsible
defaultExpanded: storyArgs.defaultExpanded
triggerLabel: storyArgs.triggerLabel
SyCodeRender {
source: story.sample
Row {
spacing: 8
SyButton { text: "저장"; variant: "primary" }
SyTag { text: "초안"; color: "yellow" }
}
}
SyCodeScript { }
}
}wrap 설정을 적용한 긴 코드 줄바꿈 예제입니다.
import QtQuick
import Syidax.Core
Item {
implicitWidth: Math.max(360, childrenRect.width)
implicitHeight: childrenRect.height
id: story
property QtObject settings: QtObject {
id: storyArgs
property string language: "qml"
property bool showLineNumbers: true
property bool showCopyButton: true
property bool wrap: true
property string highlightLines: "2"
property bool collapsible: true
property bool defaultExpanded: true
property string triggerLabel: "SOURCE"
}
readonly property string sample: "Row {\n spacing: 8\n SyButton { text: " + JSON.stringify("저장") + "; variant: \"primary\" }\n SyTag { text: " + JSON.stringify("초안") + "; color: \"yellow\" }\n}"
SyCodeViewer {
width: 520
language: storyArgs.language
showLineNumbers: storyArgs.showLineNumbers
showCopyButton: storyArgs.showCopyButton
wrap: storyArgs.wrap
highlightLines: storyArgs.highlightLines
collapsible: storyArgs.collapsible
defaultExpanded: storyArgs.defaultExpanded
triggerLabel: storyArgs.triggerLabel
SyCodeRender {
source: story.sample
Row {
spacing: 8
SyButton { text: "저장"; variant: "primary" }
SyTag { text: "초안"; color: "yellow" }
}
}
SyCodeScript { }
}
}showLineNumbers · showCopyButton 설정을 적용한 간결한 코드 블록 예제입니다.
import QtQuick
import Syidax.Core
Item {
implicitWidth: Math.max(360, childrenRect.width)
implicitHeight: childrenRect.height
id: story
property QtObject settings: QtObject {
id: storyArgs
property string language: "qml"
property bool showLineNumbers: false
property bool showCopyButton: false
property bool wrap: false
property string highlightLines: "2"
property bool collapsible: true
property bool defaultExpanded: true
property string triggerLabel: "SOURCE"
}
readonly property string sample: "Row {\n spacing: 8\n SyButton { text: " + JSON.stringify("저장") + "; variant: \"primary\" }\n SyTag { text: " + JSON.stringify("초안") + "; color: \"yellow\" }\n}"
SyCodeViewer {
width: 520
language: storyArgs.language
showLineNumbers: storyArgs.showLineNumbers
showCopyButton: storyArgs.showCopyButton
wrap: storyArgs.wrap
highlightLines: storyArgs.highlightLines
collapsible: storyArgs.collapsible
defaultExpanded: storyArgs.defaultExpanded
triggerLabel: storyArgs.triggerLabel
SyCodeRender {
source: story.sample
Row {
spacing: 8
SyButton { text: "저장"; variant: "primary" }
SyTag { text: "초안"; color: "yellow" }
}
}
SyCodeScript { }
}
}language 설정을 적용한 Python 구문 예제입니다.
import QtQuick
import Syidax.Core
SyCodeScript {
width: 520
language: "python"
showLineNumbers: true
code: "def total(items):\n return sum(item[\"amount\"] for item in items)\n\nprint(total([{\"amount\": 12}, {\"amount\": 30}]))"
}항목을 가리키거나 선택하면 QML 예제와 복사 버튼이 나타납니다.
| 속성 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| string | "plaintext" | 스크립트의 토크나이저(스크립트가 자기 language를 정하지 않는 한). | |
| bool | false | 스크립트의 거터(상속). | |
| bool | true | 스크립트의 복사 버튼(상속). | |
| bool | false | 가로 스크롤 대신 긴 줄 접기(상속). | |
| real | 0 | 스크립트 높이를 px로 제한하고 나머지를 스크롤. 0 = 제한 없음(상속). | |
| string | "" | "3,5-7" — 물들일 줄과 범위, 1부터 셈(상속). | |
| bool | true | 두 부품이 모두 있을 때 *SOURCE* 바를 보임. | |
| bool | true | expanded의 초기값. | |
| bool | defaultExpanded | 바 아래에 스크립트를 보일지. 바가 없으면 무시. | |
| string | "SOURCE" | 바의 글자. | |
| var | null | 수집된 SyCodeRender / SyCodeScript. | |
| var | null | 수집된 SyCodeRender / SyCodeScript. | |
| bool (읽기 전용) | — | 각 부품을 찾았는지. | |
| bool (읽기 전용) | — | 각 부품을 찾았는지. | |
| string (읽기 전용) | — | 렌더의 source(렌더가 없으면 ""). | |
| var (읽기 전용) | — | highlightLines를 정렬된 줄 번호 배열로 파싱한 것. | |
| bool (읽기 전용) | — | 바가 그려지는지 | |
| bool (읽기 전용) | — | 스크립트가 지금 보이는지. | |
| string | "prop" | 사용자 토글의 expandedChanged 핸들러가 도는 동안 "user", 그 외 "prop". |
| 속성 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| string | "" | 짝이 되는 스크립트가 자기 code가 비어 있을 때 보이는 코드 글자. | |
| var | null | 뷰어(뷰어가 설정). | |
| — | — | 살아 있는 아이템. 12 px 여백의 물든 무대에 그려짐. |
| 속성 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| string | "" | 보일 글자. 뷰어 안에서 "" = 렌더의 source. | |
| string | "" | 토크나이저 id 또는 별칭. "" = 뷰어의 것, 아니면 평문. | |
| var | undefined | undefined = 뷰어에서 상속. 단독 기본값 false · true · false · 0 · "". | |
| var | undefined | undefined = 뷰어에서 상속. 단독 기본값 false · true · false · 0 · "". | |
| var | undefined | undefined = 뷰어에서 상속. 단독 기본값 false · true · false · 0 · "". | |
| var | undefined | undefined = 뷰어에서 상속. 단독 기본값 false · true · false · 0 · "". | |
| var | undefined | undefined = 뷰어에서 상속. 단독 기본값 false · true · false · 0 · "". | |
| var | null | 뷰어(뷰어가 설정). | |
| string (읽기 전용) | — | 실제로 보이고 토큰화되는 것. | |
| string (읽기 전용) | — | 실제로 보이고 토큰화되는 것. | |
| 읽기 전용 | — | 상속 뒤의 유효 설정. | |
| 읽기 전용 | — | 상속 뒤의 유효 설정. | |
| 읽기 전용 | — | 상속 뒤의 유효 설정. | |
| 읽기 전용 | — | 상속 뒤의 유효 설정. | |
| 읽기 전용 | — | 상속 뒤의 유효 설정. | |
| 읽기 전용 | — | 토큰 줄 | |
| 읽기 전용 | — | 줄 수 | |
| 읽기 전용 | — | 강조 줄 번호. | |
| real (읽기 전용) | 21 | 줄 높이 | |
| real (읽기 전용) | — | 거터 폭(줄 번호가 없으면 0). |
| 메서드 | 설명 |
|---|---|
사용자 동작으로 expanded를 뒤집음. | |
사용자 동작으로 expanded를 설정(lastExpandSource = "user"). | |
| 자식에서 렌더와 스크립트를 다시 찾음(자동으로 호출됨). | |
resolvedCode를 클립보드에 복사하고 copied를 냄. |
| 시그널 | 인자 | 시점 |
|---|---|---|
detail: { hasRender, hasScript } | 완료와 첫 부품 수집 뒤 한 번. | |
| — | 사용자가(lastExpandSource === "user") 또는 바인딩 / 대입이("prop") expanded를 바꿈. | |
| — | 속성 자체의 시그널. | |
| — | 속성 자체의 시그널. | |
detail: { line } | 줄 번호가 클릭됨(showLineNumbers 필요). 1부터 셈. | |
detail: { code, language } | 복사 버튼이나 copy()가 글자를 클립보드에 놓음. | |
| — | code 속성이 바뀜. |
| 항목 | 동작 / 조건 |
|---|---|
codeRender === true인 아이템은 render가 되어 위쪽 영역에 부모가 바뀌고, codeScript === true인 아이템은 script가 되어 아래 영역으로 갑니다. | |
codeRender === true인 아이템은 render가 되어 위쪽 영역에 부모가 바뀌고, codeScript === true인 아이템은 script가 되어 아래 영역으로 갑니다. | |
codeRender === true인 아이템은 render가 되어 위쪽 영역에 부모가 바뀌고, codeScript === true인 아이템은 script가 되어 아래 영역으로 갑니다. | |
codeRender === true인 아이템은 render가 되어 위쪽 영역에 부모가 바뀌고, codeScript === true인 아이템은 script가 되어 아래 영역으로 갑니다. | |
| 뷰어(뷰어가 설정). | |
| 완료와 첫 부품 수집 뒤 한 번. | |
SyCodeScript.resolvedCode는 자기 code가 비어 있지 않으면 그것, 아니면 소유 렌더의 source, 아니면 ""입니다. 버튼 — 또는 copy() — 은 숨겨진 텍스트 편집기를 통해 resolvedCode를 시스템 클립보드에 놓고 copied를 냅니다. | |
보일 글자. 뷰어 안에서 "" = 렌더의 source. | |
짝이 되는 스크립트가 자기 code가 비어 있을 때 보이는 코드 글자. | |
resolvedLanguage는 자기 language, 아니면 뷰어의 것, 아니면 "plaintext"입니다. | |
토크나이저 id 또는 별칭. "" = 뷰어의 것, 아니면 평문. | |
| 바의 글자. | |
| 두 부품이 모두 있을 때 *SOURCE* 바를 보임. | |
사용자 동작으로 expanded를 뒤집음. | |
| 바 아래에 스크립트를 보일지. 바가 없으면 무시. | |
expanded의 초기값. | |
사용자 동작으로 expanded를 설정(lastExpandSource = "user"). | |
사용자가(lastExpandSource === "user") 또는 바인딩 / 대입이("prop") expanded를 바꿈. | |
사용자 토글의 expandedChanged 핸들러가 도는 동안 "user", 그 외 "prop". | |
"3,5-7" — 물들일 줄과 범위, 1부터 셈(상속). | |
| 스크립트의 거터(상속). | |
줄 번호가 클릭됨(showLineNumbers 필요). 1부터 셈. | |
긴 줄은 wrap이 아니면 가로로 스크롤되고, scriptHeight > 0이면 패널이 그 높이로 제한되어 세로로 스크롤됩니다. | |
긴 줄은 wrap이 아니면 가로로 스크롤되고, scriptHeight > 0이면 패널이 그 높이로 제한되어 세로로 스크롤됩니다. | |
resolvedCode를 클립보드에 복사하고 copied를 냄. | |
복사 버튼이나 copy()가 글자를 클립보드에 놓음. | |
뷰어의 implicitWidth는 480이고 implicitHeight는 렌더 + 바 + 스크립트(보일 때) + 테두리 2 px입니다. | |
뷰어의 implicitWidth는 480이고 implicitHeight는 렌더 + 바 + 스크립트(보일 때) + 테두리 2 px입니다. | |
스크립트 높이를 px로 제한하고 나머지를 스크롤. 0 = 제한 없음(상속). |
| 항목 | 동작 / 조건 |
|---|---|
SyButton(복사 버튼), SyIcon / Icons.editorCopy, Theme.editor(토큰 팔레트). |