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은 백업한 뒤 초기 데이터로 복구됩니다. 저장 실패 시 입력 값이 유지됩니다.
여러 입력 필드를 묶어 값을 검증하고 제출을 처리하는 폼입니다.
import Syidax.Core.Form
| 타입 | 정의 / 역할 |
|---|---|
| 이름이 있는 필드를 모아 함께 검증하고 값을 제출합니다. | |
| 라벨·입력 영역·도움말/오류 줄과 검증 상태를 제공하는 폼 필드의 기반 타입입니다. |
미리보기는 Qt 실행 화면의 이미지입니다. 아래 버튼으로 결과를 전환하세요.
SyForm은 폼 계층입니다.
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
Column {
spacing: 12
SyForm {
id: profile
onSubmitted: (values) => output.log(("submitted: %1").arg(JSON.stringify(values)))
Column {
spacing: 12
SyInput { name: "name"; label: "이름"; required: true }
SyInput { name: "email"; label: "이메일"; type: "email" }
SyInputNumber { name: "age"; label: "나이"; min: 0; max: 120 }
Row {
spacing: 8
SyButton { id: exampleControl1; text: "제출"; variant: "primary"; onClicked: profile.submit() }
SyButton { id: exampleControl2; text: "초기화"; onClicked: profile.reset() }
}
}
}
EventLog { id: output }
}
}폼은 각 필드에 물어 검증합니다.
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
Column {
spacing: 12
SyForm {
id: signUp
Column {
spacing: 12
SyInput { name: "user"; label: "닉네임"; required: true; min: 3 }
SyInput { name: "password"; label: "비밀번호"; variant: "password"; required: true; min: 8 }
SyTextarea { name: "bio"; label: "소개"; rows: 2; max: 60; counter: true }
}
}
Row {
spacing: 8
SyButton { id: exampleControl1; text: "signUp.reportValidity()"; variant: "secondary"; size: "small"; onClicked: output.log("reportValidity() → " + signUp.reportValidity()) }
SyButton { id: exampleControl2; text: "signUp.checkValidity()"; variant: "secondary"; size: "small"; onClicked: output.log("checkValidity() → " + signUp.checkValidity()) }
}
EventLog { id: output }
}
}폼에는 시그널이 셋 있습니다.
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: featureStory
Column {
spacing: 12
SyForm {
id: contact
onSubmitted: (values) => { if (true) { output.log(("submitted: %1").arg(JSON.stringify(values))) } }
onInvalid: (fields) => { if (true) { output.log(("invalid: %1").arg(fields.map((f) => f.name).join(", "))) } }
onDidReset: { if (true) { output.log("reset") } }
Column {
spacing: 12
SyInput { name: "name"; label: "이름"; required: true }
SyInput { name: "email"; label: "이메일"; type: "email"; required: true }
Row {
spacing: 8
SyButton { id: exampleControl1; text: "제출"; variant: "primary"; onClicked: contact.submit() }
SyButton { id: exampleControl2; text: "초기화"; onClicked: contact.reset() }
}
}
}
EventLog { id: output }
}
}코드에서 폼 읽기:
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: featureStory
Column {
spacing: 12
SyForm {
id: order
Column {
spacing: 12
SyInput { name: "item"; label: "품목"; value: "책상 조명" }
SyInputNumber { name: "qty"; label: "수량"; value: 2; min: 1 }
}
}
Flow {
width: 560
spacing: 8
SyButton { id: exampleControl1; visible: true; text: "order.values()"; variant: "secondary"; size: "small"; onClicked: output.log("values() → " + JSON.stringify(order.values())) }
SyButton { id: exampleControl2; visible: true; text: "order.field(\"qty\").value"; variant: "secondary"; size: "small"; onClicked: output.log("field(\"qty\").value → " + JSON.stringify(order.field("qty").value)) }
SyButton { id: exampleControl3; visible: true; text: "order.fields().length"; variant: "secondary"; size: "small"; onClicked: output.log("fields().length → " + order.fields().length) }
SyButton { visible: true; text: "order.reset()"; variant: "secondary"; size: "small"; onClicked: order.reset() }
}
EventLog { id: output }
}
}항목을 가리키거나 선택하면 QML 예제와 복사 버튼이 나타납니다.
| 속성 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| Item… | — | 기본 속성. 폼 안에 선언한 아이템 — 레이아웃, 필드, 버튼. | |
| bool(읽기 전용) | true | 아이템을 폼으로 표시합니다. 필드가 이것으로 소속 폼을 찾습니다. |
| 속성 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| string | "" | values() / submitted의 키. 이름 없는 필드는 검증은 되지만 제출되지 않습니다. | |
| var | "" | 필드의 값 — 텍스트 필드는 문자열, 숫자 필드는 숫자 또는 "", 라디오 그룹은 선택지 값. 체크박스와 스위치는 여기에 "on"을 두고 체크된 동안에만 제출합니다. | |
| string | "" | 본문 위의 제목(스위치는 트랙 옆). 비어 있으면 숨김. | |
| bool | false | * 표시를 더하고, 비어 있거나 / 체크 안 됐거나 / 선택 없는 필드를 valueMissing으로 만듭니다. | |
| bool | false | 반응하지 않는 필드. 항상 유효하며 values()가 건너뜁니다. | |
| string | "medium" | small · medium · large — 텍스트·숫자 필드는 24 · 32 · 40 px 높이, 텍스트에어리어는 자체 크기 체계. | |
| string | "" | 본문 아래 도움말 줄. 오류가 보이는 동안 숨김. | |
| string | "" | 필드가 무효인 동안 기본 문구 대신 보일 사용자 정의 오류 문구. 설정해도 필드가 무효가 되지는 않습니다. | |
| bool | false | 컨트롤이 포커스를 잃은 뒤(또는 setCustomError() 뒤) true. invalid의 두 관문 중 하나. | |
| bool | false | reportValidity()가 호출된 뒤 true. invalid의 다른 관문. reset()이 지웁니다. | |
| bool | false | setCustomError()와 clearCustomError() 사이에 true. 그동안 상태는 custom. | |
| string | "" | 현재 유효성 상태(위의 어휘 참고). | |
| bool(읽기 전용) | — | validStatus === "". | |
| bool(읽기 전용) | — | (touched || submitted) && !valid — 오류 줄과 무효 색조가 보이는 상태. | |
| 읽기 전용 | — | 보이게 될 문구, 그리고 지금 오류 줄 / 도움말 줄이 보이는지 여부. | |
| 읽기 전용 | — | 보이게 될 문구, 그리고 지금 오류 줄 / 도움말 줄이 보이는지 여부. | |
| 읽기 전용 | — | 보이게 될 문구, 그리고 지금 오류 줄 / 도움말 줄이 보이는지 여부. | |
| var | ({}) | 기본 문구에 필요한 { min, max, type, step }. 필드가 채웁니다. | |
| real | 240 | 앱이 width를 정하지 않을 때의 암시적 너비. 본문과 줄들은 필드 너비를 따릅니다. | |
| bool | true | 제목 줄을 그릴지 여부. | |
| real | 4 | 제목·본문·메시지 줄 사이의 간격. | |
| bool(읽기 전용) | — | 필드가 만들어지는 동안 false. changed는 true가 된 뒤에만 발생합니다. | |
| var | — | 필드 로딩이 끝날 때 잡아 둔 값. reset()이 이리로 돌아갑니다. | |
| bool(읽기 전용) | true | 아이템을 SyForm의 필드로 표시합니다. |
| 메서드 | 설명 |
|---|---|
| 안에 선언한 모든 필드, 트리 순서, 중첩 폼 제외. 아이템 목록을 돌려줍니다. | |
name이 일치하는 첫 필드 또는 null. | |
이름 있고 활성인 필드의 { name: value }(필드가 정의하면 formValue). 검증 없음. | |
모든 필드의 checkValidity()가 true이면 true. | |
모든 필드의 reportValidity() 호출(오류가 나타남), 첫 무효 필드에 포커스, true / false 반환. | |
reportValidity() 뒤 submitted(values()), 또는 실패 필드와 함께 invalid(fields)(첫 필드 포커스). 반환값 없음. | |
각 필드의 reset(), 그다음 didReset(). |
| 메서드 | 설명 |
|---|---|
상태가 ""이면 true. 조용히. | |
submitted를 설정하고(이제부터 오류 줄이 보임) true / false를 돌려줍니다. | |
상태를 custom으로 강제하고 필드를 touched로 표시하므로 오류(error, 또는 "Invalid by custom")가 즉시 보입니다. 메시지 인자는 받지 않습니다. | |
custom 상태를 해제합니다. 일반 검사가 다시 적용되며 touched는 남습니다. | |
현재 상태 문자열, 유효하면 "". | |
value를 initialValue로, touched·submitted·사용자 정의 오류를 지웁니다. | |
필드가 선언된 SyForm 또는 null. | |
| 새로 계산한 상태, 그리고 그것으로 만든 시그널 페이로드. | |
| 새로 계산한 상태, 그리고 그것으로 만든 시그널 페이로드. | |
상태별 기본 문구, 그리고 email · url · tel · number에 쓰는 형식 검사. | |
상태별 기본 문구, 그리고 email · url · tel · number에 쓰는 형식 검사. |
| 항목 | 동작 / 조건 |
|---|---|
각 필드는 자기 함수를 더합니다 — 모든 필드의 setFocus() / setBlur(), 체크박스와 스위치의 toggle(), 라디오 그룹의 select(), 숫자 필드의 stepUp() / stepDown() / setClear(). |
| 시그널 | 인자 | 발생 시점 |
|---|---|---|
values: { name: value, … } | submit() 뒤 모든 필드가 유효할 때. reportValidity()는 발생시키지 않습니다. | |
fields: [필드 아이템, …] 트리 순서 | submit() 뒤 하나 이상의 필드가 실패했을 때. 첫 필드가 포커스를 갖고, 실패한 모든 필드가 오류를 보입니다. submitted와 함께 발생하지 않습니다. | |
| — | reset()이 모든 필드를 초기화한 뒤. |
| 시그널 | 인자 | 발생 시점 |
|---|---|---|
detail: { value, isValid, status }(텍스트에어리어는 length 추가, 체크박스 / 스위치는 다름) | 로딩 뒤 value가 바뀜 — 사용자든 코드든. 초기값에는 발생하지 않음. | |
| 같은 모양 | 컨트롤이 활성 포커스를 얻음. | |
| 같은 모양 | 컨트롤이 포커스를 잃음. touched가 이미 true이므로 실패한 필드는 이제부터 오류를 보임. |
| 항목 | 동작 / 조건 |
|---|---|
| 안에 선언한 모든 필드, 트리 순서, 중첩 폼 제외. 아이템 목록을 돌려줍니다. | |
아이템을 SyForm의 필드로 표시합니다. | |
이름 있고 활성인 필드의 { name: value }(필드가 정의하면 formValue). 검증 없음. | |
values() / submitted의 키. 이름 없는 필드는 검증은 되지만 제출되지 않습니다. | |
반응하지 않는 필드. 항상 유효하며 values()가 건너뜁니다. | |
필드의 값 — 텍스트 필드는 문자열, 숫자 필드는 숫자 또는 "", 라디오 그룹은 선택지 값. 체크박스와 스위치는 여기에 "on"을 두고 체크된 동안에만 제출합니다. | |
모든 필드의 checkValidity()가 true이면 true. 첫 실패에서 멈추고 아무것도 보이지 않음. | |
모든 필드의 reportValidity() 호출(오류가 나타남), 첫 무효 필드에 포커스, true / false 반환. 시그널 없음. | |
reportValidity() 뒤 submitted(values()), 또는 실패 필드와 함께 invalid(fields)(첫 필드 포커스). 반환값 없음. | |
reportValidity()가 호출된 뒤 true. invalid의 다른 관문. reset()이 지웁니다. | |
(touched || submitted) && !valid — 오류 줄과 무효 색조가 보이는 상태. | |
각 필드의 reset(), 그다음 didReset(). | |
필드 로딩이 끝날 때 잡아 둔 값. reset()이 이리로 돌아갑니다. | |
reset()이 모든 필드를 초기화한 뒤. | |
안의 필드가 폼을 채워야 한다면 폼에 width(또는 앵커)를 주십시오. |
SyFieldFrame)| 항목 | 동작 / 조건 |
|---|---|
| 본문 위의 제목(스위치는 트랙 옆). 비어 있으면 숨김. | |
* 표시를 더하고, 비어 있거나 / 체크 안 됐거나 / 선택 없는 필드를 valueMissing으로 만듭니다. | |
| 제목 줄을 그릴지 여부. | |
| 본문 아래 도움말 줄. 오류가 보이는 동안 숨김. | |
(touched || submitted) && !valid — 오류 줄과 무효 색조가 보이는 상태. | |
| 현재 유효성 상태(위의 어휘 참고). | |
상태를 custom으로 강제하고 필드를 touched로 표시하므로 오류(error, 또는 "Invalid by custom")가 즉시 보입니다. 메시지 인자는 받지 않습니다. | |
validStatus === "". | |
컨트롤이 포커스를 잃은 뒤(또는 setCustomError() 뒤) true. invalid의 두 관문 중 하나. | |
reportValidity()가 호출된 뒤 true. invalid의 다른 관문. reset()이 지웁니다. | |
submitted를 설정하고(이제부터 오류 줄이 보임) true / false를 돌려줍니다. | |
| 필드가 무효인 동안 기본 문구 대신 보일 사용자 정의 오류 문구. 설정해도 필드가 무효가 되지는 않습니다. | |
반응하지 않는 필드. 항상 유효하며 values()가 건너뜁니다. | |
로딩 뒤 value가 바뀜 — 사용자든 코드든. 초기값에는 발생하지 않음. | |
필드의 값 — 텍스트 필드는 문자열, 숫자 필드는 숫자 또는 "", 라디오 그룹은 선택지 값. 체크박스와 스위치는 여기에 "on"을 두고 체크된 동안에만 제출합니다. | |
필드가 만들어지는 동안 false. changed는 true가 된 뒤에만 발생합니다. | |
| 컨트롤이 활성 포커스를 얻음. | |
컨트롤이 포커스를 잃음. touched가 이미 true이므로 실패한 필드는 이제부터 오류를 보임. | |
changed(detail)는 필드 로딩이 끝난 뒤 value가 바뀔 때마다 발생합니다 — 타이핑, 지우기 버튼, 메서드, 코드에서의 대입 모두. focused(detail)는 컨트롤이 활성 포커스를 얻을 때, blured(detail)는 잃을 때(직전에 touched가 true가 됨) 발생합니다. detail은 텍스트·숫자 필드에서 { value, isValid, status }, 텍스트에어리어에서 { value, length, isValid, status }이고, 체크박스와 스위치는 자기 모양을 전달합니다(해당 페이지 참고). |
SyFieldFrame)| 상태 | 문구 |
|---|---|
| This field is required | |
| Value must be at least {min} characters long | |
| Value cannot exceed {max} characters | |
Please enter a valid email address / URL / phone number / number(type별), 그 밖에는 "Please enter a valid value" | |
| Value must be at least {min} | |
| Value cannot exceed {max} | |
| Value must be a multiple of {step} starting from {min 또는 0} | |
| Invalid by custom |