QT QUICK · C++ · PYTHON

하나의 디자인 언어.
네이티브 앱까지.

QML 컴포넌트, 공통 디자인 토큰과 직접 실행할 수 있는 예제로 데스크톱 화면을 만드세요.

시작하기 컴포넌트 살펴보기 →

QML Core는 별도 제품입니다. C++와 Python에서 같은 QML 화면을 사용합니다.

Syidax QML workbench running in the native application — Syidax Core로 만든 실제 Qt Quick 애플리케이션입니다.

QML CORE

컴포넌트

컴포넌트 검색

56개 컴포넌트 중 56개

START WITH A WORKING APP

다운로드부터 첫 화면까지

C++ · CMake

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

Python · PySide6

순수 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 출시 후 사용하는 방법입니다.

실행을 확인한 Windows 환경

아래 버전에서 네이티브 창과 예제의 기본 실행을 검사했습니다. Qt 6.8은 소스 최소 기준이며 모든 Qt 버전의 검증을 뜻하지 않습니다. Gallery는 software 렌더러를 사용합니다.

완성된 두 가지 업무 예제

실행 중인 Windows 앱을 단계별로 캡처했습니다. 재생·일시 정지로 각 상태를 살펴보세요.

Workbench: 작업 완료 처리, 변경 저장과 출시 진행률 갱신.

Record Manager: 저장 실패 후 초안 보존, 재시도, 검색과 삭제 전 확인.

실제 화면에서 확인하세요

TRY IT YOURSELF

직접 실행하는 Gallery

Windows 앱에서 예제를 실행하고 속성을 살펴보며 밝은 테마와 어두운 테마를 전환하세요. Gallery는 평가용이며 상업용 SDK는 별도 제품입니다.

Gallery 다운로드 · Windows x64

QML 예제 소스와 샘플 파일 다운로드

QML Core

$24.99 / 월

$249.99 / 년 · 개발자 1명 기준

Chart와 동일한 정규 단가입니다. 첫 구매·추가 좌석·갱신에 같은 가격이 적용됩니다.

문서, 실행 가능한 예제와 진단 도구를 제공합니다. 개별 기술 지원, 온보딩, SLA는 제공하지 않습니다.

구매 및 라이선스 조건 보기 →

문제 해결

모듈을 찾지 못함

--qml 경로가 Syidax 폴더를 포함하는지 확인하세요. Python에서는 qml-pure를 사용합니다. 소스 저장소가 아닌 압축 해제한 SDK를 기준으로 실행하세요.

라이선스가 inactive 또는 frozen

QML Core 인증서를 다시 다운로드한 뒤 --license로 전달하세요. Web Core·Chart·Grid 인증서는 QML을 활성화하지 않습니다. 월간 만료 시 사용이 종료되며, 연간은 이용 기간 내 출시 버전에 한해 보유 권한이 적용됩니다.

Qt 버전 또는 플러그인 오류

플러그인 빌드의 Qt 버전과 아키텍처를 확인하세요. 서로 다른 Python Qt 바인딩을 혼용하지 마세요. qml-pure로 플러그인 ABI 의존성을 피할 수 있습니다.

PDF 또는 아이콘이 표시되지 않음

PDF는 별도 QtQuick.Pdf 모듈이 필요합니다. 이 모듈이 없어도 나머지 Core 컴포넌트는 사용 가능합니다. 아이콘 팩 등록과 리소스 경로는 SDK의 ICON-PACKS 문서를 확인하세요.

저장 실패 또는 설정 손상

예제는 사용자 앱 데이터 폴더에만 저장합니다. 권한과 디스크 공간을 확인하세요. 잘못된 JSON은 백업한 뒤 초기 데이터로 복구됩니다. 저장 실패 시 입력 값이 유지됩니다.

← 전체 컴포넌트

Tree

폴더나 분류처럼 계층이 있는 데이터를 트리로 표시합니다. 하위 항목을 펼치고 필요한 노드를 선택할 수 있습니다.

import Syidax.Core.Tree

지원 QML 타입

타입	정의 / 역할
	노드의 펼침·선택·체크·편집을 제공하는 계층형 목록입니다.
	SyTree가 노드마다 생성하는 행이며 item(value)로 기존 행에 접근합니다.

미리보기는 Qt 실행 화면의 이미지입니다. 아래 버튼으로 결과를 전환하세요.

01 기본 구성

SyTree는 계층적인 노드 모델을 들여쓴 행으로 그립니다 — 폴더, 분류, 조직도처럼 항목이 다른 항목을 품고, 사용자가 열고 고르고 체크해야 하는 모든 구조에 씁니다.

기본 실행 화면

QML 코드

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
    id: story

    property QtObject settings: QtObject {
        id: storyArgs
        property bool expandable: true
        property bool expandAll: false
        property bool checkable: false
        property bool clickable: true
        property bool editable: false
        property bool line: false
        property string searchTerm: ""
    }

    readonly property var nodes: [
        { value: "docs", label: "문서", expanded: true, children: [
            { value: "docs-plan", label: "계획" },
            { value: "docs-spec", label: "명세", tagMessage: "초안", tagVariant: "yellow" }
        ] },
        { value: "design", label: "디자인", children: [
            { value: "design-tokens", label: "토큰" },
            { value: "design-icons", label: "아이콘", children: [ { value: "design-icons-core", label: "코어 아이콘" } ] }
        ] },
        { value: "archive", label: "보관함", disabled: true }
    ]

    Column {
        spacing: 12
        SyTree {
            nodes: story.nodes
            expandable: storyArgs.expandable
            expandAll: storyArgs.expandAll
            checkable: storyArgs.checkable
            clickable: storyArgs.clickable
            editable: storyArgs.editable
            line: storyArgs.line
            searchTerm: storyArgs.searchTerm
            onItemSelected: (detail) => output.log(detail.value)
        }
        EventLog { id: output }
    }

}

02 icon · tagMessage · editable · appendable · removable · fixed

nodes의 각 항목은 평범한 객체입니다.

icon · tagMessage · editable · appendable · removable · fixed · 기본 — Qt 실행 화면 · 이미지

QML 코드

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
    property QtObject settings: QtObject {
        id: storyArgs
        property bool icon: true
        property string tagMessage: "진행 중"
        property bool editable: true
        property bool appendable: true
        property bool removable: true
        property bool fixed: true
        property bool manualAdd: false
        property bool manualRemove: false
    }

    readonly property var nodes: [
        { value: "projects", label: "프로젝트", expanded: true, appendable: true && storyArgs.appendable, icon: true && storyArgs.icon ? Icons.treeAdd : "", children: [
            { value: "projects-web", label: "웹", editable: true && storyArgs.editable, removable: true && storyArgs.removable, tagMessage: "진행 중", tagVariant: "green" },
            { value: "projects-app", label: "앱", editable: true && storyArgs.editable, removable: true && storyArgs.removable },
            { value: "projects-root", label: "루트(고정)", fixed: true && storyArgs.fixed, removable: true && storyArgs.removable }
        ] }
    ]

    SyTree {
        nodes: story.nodes
        expandable: true
        manualAdd: storyArgs.manualAdd
        manualRemove: storyArgs.manualRemove
    }
}

03 itemSelected · itemChecked · expandChanged · itemAdded · itemEdited · itemRemoved

모든 시그널은 detail 객체 하나를 넘깁니다.

itemSelected · itemChecked · expandChanged · itemAdded · itemEdited · itemRemoved · 기본 — Qt 실행 화면 · 이미지

기본 실행 화면

QML 코드

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 var nodes: [
        { value: "docs", label: "문서", expanded: true, appendable: true, children: [
            { value: "docs-plan", label: "계획", editable: true, removable: true },
            { value: "docs-spec", label: "명세", editable: true, removable: true }
        ] },
        { value: "design", label: "디자인", children: [ { value: "design-tokens", label: "토큰" } ] }
    ]

    Column {
        spacing: 12
        SyTree {
            nodes: story.nodes
            expandable: true; checkable: true; clickable: true
            onItemSelected: (detail) => { if (true) { output.log(("itemSelected: %1").arg(detail.value)) } }
            onItemChecked: (detail) => { if (true) { output.log(("itemChecked: %1 %2").arg(detail.value).arg(detail.checked)) } }
            onExpandChanged: (detail) => { if (true) { output.log(("expandChanged: %1 %2").arg(detail.value).arg(detail.expanded)) } }
            onItemAdded: (detail) => { if (true) { output.log(("itemAdded: %1 under %2").arg(detail.childLabel).arg(detail.parentValue)) } }
            onItemEdited: (detail) => { if (true) { output.log(("itemEdited: %1 → %2").arg(detail.value).arg(detail.label)) } }
            onItemRemoved: (detail) => { if (true) { output.log(("itemRemoved: %1").arg(detail.value)) } }
        }
        EventLog { id: output }
    }
}

04 expandNode · collapseNode · setChecked · select · addChild · editNode · removeNode · findNode

모든 함수는 노드의 value를 받습니다.

expandNode · collapseNode · setChecked · select · addChild · editNode · removeNode · findNode · 기본 — Qt 실행 화면 · 이미지

QML 코드

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 var nodes: [
        { value: "docs", label: "문서", children: [
            { value: "docs-plan", label: "계획" },
            { value: "docs-spec", label: "명세" }
        ] },
        { value: "design", label: "디자인", children: [ { value: "design-tokens", label: "토큰" } ] }
    ]

    Column {
        spacing: 24
        SyTree { id: tree; expandable: true; checkable: true; clickable: true; nodes: story.nodes }
        Flow {
            width: 560
            spacing: 8
            SyButton { id: exampleControl1;  visible: true; text: "tree.expandNode(\"docs\")"; variant: "secondary"; size: "small"; onClicked: tree.expandNode("docs") }
            SyButton { id: exampleControl2;  visible: true; text: "tree.collapseNode(\"docs\")"; variant: "secondary"; size: "small"; onClicked: tree.collapseNode("docs") }
            SyButton { id: exampleControl3;  visible: true; text: "tree.setChecked(\"design\", true)"; variant: "secondary"; size: "small"; onClicked: tree.setChecked("design", true) }
            SyButton { visible: true; text: "tree.select(\"docs-plan\")"; variant: "secondary"; size: "small"; onClicked: tree.select("docs-plan") }
            SyButton { visible: true; text: "tree.addChild(\"design\", …)"; variant: "secondary"; size: "small"; onClicked: tree.addChild("design", "새 항목") }
            SyButton { visible: true; text: "tree.editNode(\"docs-spec\", …)"; variant: "secondary"; size: "small"; onClicked: tree.editNode("docs-spec", "이름 바꿈") }
            SyButton { visible: true; text: "tree.removeNode(\"docs-spec\")"; variant: "secondary"; size: "small"; onClicked: tree.removeNode("docs-spec") }
            SyButton { visible: true; text: "console.log(tree.findNode(\"docs\").label)"; variant: "secondary"; size: "small"; onClicked: output.log(tree.findNode("docs").label) }
        }
        Text {
            text: "tree.selectedValue === " + JSON.stringify(tree.selectedValue) + "   tree.rows.length === " + tree.rows.length
            font.family: Theme.monoFontFamily
            font.pixelSize: 12
            color: Theme.semantic.textSubtle
        }
        EventLog { id: output }
    }
}

05 계층형 체크박스

checkable · expandAll 설정을 적용한 계층형 체크박스 예제입니다.

기본 실행 화면

QML 코드

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
    id: story

    property QtObject settings: QtObject {
        id: storyArgs
        property bool expandable: true
        property bool expandAll: true
        property bool checkable: true
        property bool clickable: true
        property bool editable: false
        property bool line: false
        property string searchTerm: ""
    }

    readonly property var nodes: [
        { value: "docs", label: "문서", expanded: true, children: [
            { value: "docs-plan", label: "계획" },
            { value: "docs-spec", label: "명세", tagMessage: "초안", tagVariant: "yellow" }
        ] },
        { value: "design", label: "디자인", children: [
            { value: "design-tokens", label: "토큰" },
            { value: "design-icons", label: "아이콘", children: [ { value: "design-icons-core", label: "코어 아이콘" } ] }
        ] },
        { value: "archive", label: "보관함", disabled: true }
    ]

    Column {
        spacing: 12
        SyTree {
            nodes: story.nodes
            expandable: storyArgs.expandable
            expandAll: storyArgs.expandAll
            checkable: storyArgs.checkable
            clickable: storyArgs.clickable
            editable: storyArgs.editable
            line: storyArgs.line
            searchTerm: storyArgs.searchTerm
            onItemSelected: (detail) => output.log(detail.value)
        }
        EventLog { id: output }
    }

}

06 노드 이름 편집

editable · expandAll 설정을 적용한 노드 이름 편집 예제입니다.

기본 실행 화면

QML 코드

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
    id: story

    property QtObject settings: QtObject {
        id: storyArgs
        property bool expandable: true
        property bool expandAll: true
        property bool checkable: false
        property bool clickable: true
        property bool editable: true
        property bool line: false
        property string searchTerm: ""
    }

    readonly property var nodes: [
        { value: "docs", label: "문서", expanded: true, children: [
            { value: "docs-plan", label: "계획" },
            { value: "docs-spec", label: "명세", tagMessage: "초안", tagVariant: "yellow" }
        ] },
        { value: "design", label: "디자인", children: [
            { value: "design-tokens", label: "토큰" },
            { value: "design-icons", label: "아이콘", children: [ { value: "design-icons-core", label: "코어 아이콘" } ] }
        ] },
        { value: "archive", label: "보관함", disabled: true }
    ]

    Column {
        spacing: 12
        SyTree {
            nodes: story.nodes
            expandable: storyArgs.expandable
            expandAll: storyArgs.expandAll
            checkable: storyArgs.checkable
            clickable: storyArgs.clickable
            editable: storyArgs.editable
            line: storyArgs.line
            searchTerm: storyArgs.searchTerm
            onItemSelected: (detail) => output.log(detail.value)
        }
        EventLog { id: output }
    }

}

07 계층 연결선

line · expandAll 설정을 적용한 계층 연결선 예제입니다.

기본 실행 화면

QML 코드

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
    id: story

    property QtObject settings: QtObject {
        id: storyArgs
        property bool expandable: true
        property bool expandAll: true
        property bool checkable: false
        property bool clickable: true
        property bool editable: false
        property bool line: true
        property string searchTerm: ""
    }

    readonly property var nodes: [
        { value: "docs", label: "문서", expanded: true, children: [
            { value: "docs-plan", label: "계획" },
            { value: "docs-spec", label: "명세", tagMessage: "초안", tagVariant: "yellow" }
        ] },
        { value: "design", label: "디자인", children: [
            { value: "design-tokens", label: "토큰" },
            { value: "design-icons", label: "아이콘", children: [ { value: "design-icons-core", label: "코어 아이콘" } ] }
        ] },
        { value: "archive", label: "보관함", disabled: true }
    ]

    Column {
        spacing: 12
        SyTree {
            nodes: story.nodes
            expandable: storyArgs.expandable
            expandAll: storyArgs.expandAll
            checkable: storyArgs.checkable
            clickable: storyArgs.clickable
            editable: storyArgs.editable
            line: storyArgs.line
            searchTerm: storyArgs.searchTerm
            onItemSelected: (detail) => output.log(detail.value)
        }
        EventLog { id: output }
    }

}

08 노드 검색

searchTerm · expandAll 설정을 적용한 노드 검색 예제입니다.

기본 실행 화면

QML 코드

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
    id: story

    property QtObject settings: QtObject {
        id: storyArgs
        property bool expandable: true
        property bool expandAll: true
        property bool checkable: false
        property bool clickable: true
        property bool editable: false
        property bool line: false
        property string searchTerm: "디자인"
    }

    readonly property var nodes: [
        { value: "docs", label: "문서", expanded: true, children: [
            { value: "docs-plan", label: "계획" },
            { value: "docs-spec", label: "명세", tagMessage: "초안", tagVariant: "yellow" }
        ] },
        { value: "design", label: "디자인", children: [
            { value: "design-tokens", label: "토큰" },
            { value: "design-icons", label: "아이콘", children: [ { value: "design-icons-core", label: "코어 아이콘" } ] }
        ] },
        { value: "archive", label: "보관함", disabled: true }
    ]

    Column {
        spacing: 12
        SyTree {
            nodes: story.nodes
            expandable: storyArgs.expandable
            expandAll: storyArgs.expandAll
            checkable: storyArgs.checkable
            clickable: storyArgs.clickable
            editable: storyArgs.editable
            line: storyArgs.line
            searchTerm: storyArgs.searchTerm
            onItemSelected: (detail) => output.log(detail.value)
        }
        EventLog { id: output }
    }

}

09 전체 노드 탐색

expandAll 설정을 적용한 전체 노드 탐색 예제입니다.

기본 실행 화면

QML 코드

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
    id: story

    property QtObject settings: QtObject {
        id: storyArgs
        property bool expandable: true
        property bool expandAll: true
        property bool checkable: false
        property bool clickable: true
        property bool editable: false
        property bool line: false
        property string searchTerm: ""
    }

    readonly property var nodes: [
        { value: "docs", label: "문서", expanded: true, children: [
            { value: "docs-plan", label: "계획" },
            { value: "docs-spec", label: "명세", tagMessage: "초안", tagVariant: "yellow" }
        ] },
        { value: "design", label: "디자인", children: [
            { value: "design-tokens", label: "토큰" },
            { value: "design-icons", label: "아이콘", children: [ { value: "design-icons-core", label: "코어 아이콘" } ] }
        ] },
        { value: "archive", label: "보관함", disabled: true }
    ]

    Column {
        spacing: 12
        SyTree {
            nodes: story.nodes
            expandable: storyArgs.expandable
            expandAll: storyArgs.expandAll
            checkable: storyArgs.checkable
            clickable: storyArgs.clickable
            editable: storyArgs.editable
            line: storyArgs.line
            searchTerm: storyArgs.searchTerm
            onItemSelected: (detail) => output.log(detail.value)
        }
        EventLog { id: output }
    }

}

10 선택 없는 계층 보기

clickable · line 설정을 적용한 선택 없는 계층 보기 예제입니다.

기본 실행 화면

QML 코드

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
    id: story

    property QtObject settings: QtObject {
        id: storyArgs
        property bool expandable: true
        property bool expandAll: false
        property bool checkable: false
        property bool clickable: false
        property bool editable: false
        property bool line: true
        property string searchTerm: ""
    }

    readonly property var nodes: [
        { value: "docs", label: "문서", expanded: true, children: [
            { value: "docs-plan", label: "계획" },
            { value: "docs-spec", label: "명세", tagMessage: "초안", tagVariant: "yellow" }
        ] },
        { value: "design", label: "디자인", children: [
            { value: "design-tokens", label: "토큰" },
            { value: "design-icons", label: "아이콘", children: [ { value: "design-icons-core", label: "코어 아이콘" } ] }
        ] },
        { value: "archive", label: "보관함", disabled: true }
    ]

    Column {
        spacing: 12
        SyTree {
            nodes: story.nodes
            expandable: storyArgs.expandable
            expandAll: storyArgs.expandAll
            checkable: storyArgs.checkable
            clickable: storyArgs.clickable
            editable: storyArgs.editable
            line: storyArgs.line
            searchTerm: storyArgs.searchTerm
            onItemSelected: (detail) => output.log(detail.value)
        }
        EventLog { id: output }
    }

}

API 136

항목을 가리키거나 선택하면 QML 예제와 복사 버튼이 나타납니다.

속성 · SyTree

타입	기본값	설명
var (array)	`[]`	모델: `[{ value, label, children, expanded, checked, indeterminate, disabled, icon, tagMessage, tagVariant, clickable, editable, appendable, removable, fixed, appendPlaceholder }]`. 변화마다 새 복사본으로 교체됩니다.
bool	`false`	캐럿을 보이고 `expanded`가 아닌 노드의 자식을 숨깁니다. 꺼져 있으면 모든 노드가 보입니다.
bool	`false`	자식이 있는 모든 노드의 `expanded`를 다시 씁니다 — `true`는 모두 열고 `false`는 모두 닫습니다 — 완료 시점과 값이 바뀔 때마다.
bool	`false`	체크 박스를 보입니다. 체크는 자손으로 내려가고 조상으로 올라갑니다(`indeterminate`).
bool	`false`	노드가 자기 `clickable`을 가질 수도 있습니다.
bool	`false`	모든 노드(`fixed` 제외)가 제자리 이름 바꾸기 연필 버튼을 얻습니다.
bool	`false`	+ 버튼과 `addChild()`가 `itemAdded`만 냅니다. 모델은 앱에 맡깁니다.
bool	`false`	× 버튼과 `removeNode()`가 `itemRemoved`만 냅니다.
bool	`false`	행을 서로의 위로 끌 수 있음: 대상의 앞 / 뒤 / 안. 놓으면 `moveNode()`가 호출되고 `nodeMoved`가 알림.
var (읽기 전용)	`null`	행을 다른 행 위로 끄는 동안의 `{ value, target, position }`(`position`은 `"before"` · `"after"` · `"into"`).
bool	`false`	각 부모에서 자식으로 내려가는 안내선을 그립니다.
real	`0`	모든 행(과 트리)의 고정 폭. `0` = 가장 넓은 행만큼.
string	`""`	선택된 노드의 `value`. 설정하면 시그널 없이 코드에서 선택되고, `""`면 해제됩니다.
string	`""`	라벨에 글자가 들어 있는 가지만(대소문자 무시) 남기고, 열고, 일치 부분을 굵게 합니다.
var (읽기 전용)	`[]`	순서대로의 보이는 행: `{ node, level, last, parentValue, ancestors }`.
int	`0`	생성되는 자식 값(`parentValue + "-" + serial`)의 카운터.

속성 · SyTreeItem (행 하나; 트리가 만들며 `item(value)`로 접근)

타입	기본값	설명
var	`null`	행을 소유한 트리. 모든 동작이 여기로 전달됩니다.
var	`{}`	행이 그리는 노드 객체.
string	`""`	노드의 정체성과 글자.
string	`""`	노드의 정체성과 글자.
int	`0`	깊이(단계당 24 px)와 마지막 형제 여부(안내선이 짧아짐).
bool	`false`	깊이(단계당 24 px)와 마지막 형제 여부(안내선이 짧아짐).
bool	`false`	하위 트리가 애니메이션 중일 때 트리가 설정: 행이 0 px 높이.
bool	`false`	캐럿을 그리는지, 아래를 가리키는지.
bool	`false`	캐럿을 그리는지, 아래를 가리키는지.
bool	`false`	캐럿을 그리는지, 아래를 가리키는지.
bool	`false`	체크 박스와 그 상태.
bool	`false`	체크 박스와 그 상태.
bool	`false`	체크 박스와 그 상태.
bool	`false`	선택 허용
bool	`false`	입력 무시
bool	`false`	선택된 모양.
bool	`false`	호버 시 어떤 동작 버튼이 나타나는지.
bool	`false`	호버 시 어떤 동작 버튼이 나타나는지.
bool	`false`	호버 시 어떤 동작 버튼이 나타나는지.
string	`"New item"`	추가 행의 플레이스홀더.
url	`""`	라벨 앞의 글리프.
string	`""`	라벨 뒤의 작은 태그와 그 색.
string	`"gray"`	라벨 뒤의 작은 태그와 그 색.
string	`""`	라벨에서 굵게 할 글자.
bool	`false`	안내선
real	`0`	고정 행 폭.
bool	`false`	이름 바꾸기 필드 / 추가 행이 열려 있는지.
bool	`false`	이름 바꾸기 필드 / 추가 행이 열려 있는지.
bool (읽기 전용)	—	포인터가 행 위에 있음
bool (읽기 전용)	—	동작 버튼이 보임.
real (읽기 전용)	`24`	단계당 픽셀.

메서드

메서드	설명
	현재 `nodes`의 노드 객체 또는 `null`을 반환. 읽기 전용으로 쓰십시오.
	노드를 애니메이션과 `expandChanged`와 함께 열기 / 닫기 / 뒤집기. 앞의 둘은 이미 그 상태면 아무 일도 하지 않음.
	노드를 애니메이션과 `expandChanged`와 함께 열기 / 닫기 / 뒤집기. 앞의 둘은 이미 그 상태면 아무 일도 하지 않음.
	노드를 애니메이션과 `expandChanged`와 함께 열기 / 닫기 / 뒤집기. 앞의 둘은 이미 그 상태면 아무 일도 하지 않음.
	하위 트리를 체크하고, 조상을 다시 계산하고, 커밋하고 `itemChecked`를 냄. `checkable`과 `disabled`에 무관하게 동작.
	존재하는 노드에 대해 `selectedValue`를 설정하고 `itemSelected`를 냄. `clickable` / `disabled` 무관.
	`{ value: parentValue + "-" + n, label, children: [] }`를 추가하고, 부모를 펼치고, `itemAdded`를 냄. 자식을 반환(부모가 없으면 `null`). `manualAdd`면 알리고 반환만.
	라벨을 설정하고 커밋하고 `itemEdited`를 냄. `fixed` / `editable` 무시.
	노드와 하위 트리를 지우고 커밋하고 `itemRemoved`를 냄(`manualRemove`면 알리기만). `fixed` / `removable` 무시.
	노드를 `targetValue`의 앞 / 뒤 / 안으로 옮기고(`"before"` · `"after"` · `"into"`; into는 대상도 펼침) 커밋한 뒤 `nodeMoved`를 냄. `true` 반환. 노드를 모르거나 대상이 옮기는 하위 트리 안에 있으면 `false`를 반환하고 아무 일도 하지 않음.
	보이는 노드의 `SyTreeItem` 행 또는 `null`.
	노드의 깊이(최상위 0), 없으면 `-1`.

메서드

항목	동작 / 조건
	행 메서드(`SyTreeItem`): `toggleExpand()`, `setChecked(checked)`, `select()`, `startEditing()`, `commitEdit()`, `startAdding()`, `commitAdd()`, `remove()` — 버튼과 같은 관문(`disabled`, `clickable`, `editable`, `appendable`, `removable`)을 따릅니다.
	행 메서드(`SyTreeItem`): `toggleExpand()`, `setChecked(checked)`, `select()`, `startEditing()`, `commitEdit()`, `startAdding()`, `commitAdd()`, `remove()` — 버튼과 같은 관문(`disabled`, `clickable`, `editable`, `appendable`, `removable`)을 따릅니다.
	행 메서드(`SyTreeItem`): `toggleExpand()`, `setChecked(checked)`, `select()`, `startEditing()`, `commitEdit()`, `startAdding()`, `commitAdd()`, `remove()` — 버튼과 같은 관문(`disabled`, `clickable`, `editable`, `appendable`, `removable`)을 따릅니다.
	행 메서드(`SyTreeItem`): `toggleExpand()`, `setChecked(checked)`, `select()`, `startEditing()`, `commitEdit()`, `startAdding()`, `commitAdd()`, `remove()` — 버튼과 같은 관문(`disabled`, `clickable`, `editable`, `appendable`, `removable`)을 따릅니다.
	행 메서드(`SyTreeItem`): `toggleExpand()`, `setChecked(checked)`, `select()`, `startEditing()`, `commitEdit()`, `startAdding()`, `commitAdd()`, `remove()` — 버튼과 같은 관문(`disabled`, `clickable`, `editable`, `appendable`, `removable`)을 따릅니다.
	행 메서드(`SyTreeItem`): `toggleExpand()`, `setChecked(checked)`, `select()`, `startEditing()`, `commitEdit()`, `startAdding()`, `commitAdd()`, `remove()` — 버튼과 같은 관문(`disabled`, `clickable`, `editable`, `appendable`, `removable`)을 따릅니다.
	행 메서드(`SyTreeItem`): `toggleExpand()`, `setChecked(checked)`, `select()`, `startEditing()`, `commitEdit()`, `startAdding()`, `commitAdd()`, `remove()` — 버튼과 같은 관문(`disabled`, `clickable`, `editable`, `appendable`, `removable`)을 따릅니다.
	행 메서드(`SyTreeItem`): `toggleExpand()`, `setChecked(checked)`, `select()`, `startEditing()`, `commitEdit()`, `startAdding()`, `commitAdd()`, `remove()` — 버튼과 같은 관문(`disabled`, `clickable`, `editable`, `appendable`, `removable`)을 따릅니다.

시그널

시그널	인자	시점
	`detail: { value, label, checked }`	클릭 가능하고 활성인 행이 클릭됨, Return / Space로 선택됨, 또는 `select()` 실행. 클릭 불가·비활성 행에는 없음.
	`detail: { value, label, checked }`	행의 박스가 토글됨(클릭, Space) 또는 `setChecked()` 실행. 조작한 노드와 새 상태를 알림.
	`detail: { value, label, expanded }`	캐럿, 더블클릭, Right / Left, `expandNode` / `collapseNode` / `toggleExpand`. 이미 그 상태면 조용함.
	`detail: { parentValue, childLabel, childValue, childLevel }`	추가 행이 비어 있지 않은 라벨로 확정되거나 `addChild()` 실행 — `manualAdd`여도.
	`detail: { value, label }`	새롭고 비어 있지 않은 라벨로 이름 바꾸기가 확정되거나 `editNode()` 실행.
	`detail: { value, label }`	×가 눌리거나 `removeNode()` 실행 — `manualRemove`여도.
	`detail: { value, label, targetValue, position }`	놓기가 끝났거나 `moveNode()`가 실행되어 노드가 `targetValue`의 앞 / 뒤 / 안으로 옮겨짐.
	—	`nodes`가 새 배열을 담음(트리가 만든 모든 변화 뒤, 그리고 직접 대입할 때).

시그널

항목	동작 / 조건
	행(`SyTreeItem`)은 `expandChanged`, `checkChanged`, `itemSelected`, `itemAdded`, `itemRemoved`, `itemEdited`를 같은 모양으로 자기 몫으로 트리보다 먼저 냅니다.
	행(`SyTreeItem`)은 `expandChanged`, `checkChanged`, `itemSelected`, `itemAdded`, `itemRemoved`, `itemEdited`를 같은 모양으로 자기 몫으로 트리보다 먼저 냅니다.
	행(`SyTreeItem`)은 `expandChanged`, `checkChanged`, `itemSelected`, `itemAdded`, `itemRemoved`, `itemEdited`를 같은 모양으로 자기 몫으로 트리보다 먼저 냅니다.
	행(`SyTreeItem`)은 `expandChanged`, `checkChanged`, `itemSelected`, `itemAdded`, `itemRemoved`, `itemEdited`를 같은 모양으로 자기 몫으로 트리보다 먼저 냅니다. 행의 `itemAdded.childValue`는 `""`입니다.
	행(`SyTreeItem`)은 `expandChanged`, `checkChanged`, `itemSelected`, `itemAdded`, `itemRemoved`, `itemEdited`를 같은 모양으로 자기 몫으로 트리보다 먼저 냅니다.
	행(`SyTreeItem`)은 `expandChanged`, `checkChanged`, `itemSelected`, `itemAdded`, `itemRemoved`, `itemEdited`를 같은 모양으로 자기 몫으로 트리보다 먼저 냅니다.

동작

항목	동작 / 조건
	모델: `[{ value, label, children, expanded, checked, indeterminate, disabled, icon, tagMessage, tagVariant, clickable, editable, appendable, removable, fixed, appendPlaceholder }]`. 변화마다 새 복사본으로 교체됩니다.
	`nodes`가 새 배열을 담음(트리가 만든 모든 변화 뒤, 그리고 직접 대입할 때).
	현재 `nodes`의 노드 객체 또는 `null`을 반환. 읽기 전용으로 쓰십시오.
	순서대로의 보이는 행: `{ node, level, last, parentValue, ancestors }`.
	행이 그리는 노드 객체.
	+ 버튼과 `addChild()`가 `itemAdded`만 냅니다. 모델은 앱에 맡깁니다.
	× 버튼과 `removeNode()`가 `itemRemoved`만 냅니다.
	캐럿을 보이고 `expanded`가 아닌 노드의 자식을 숨깁니다. 꺼져 있으면 모든 노드가 보입니다.
	라벨에 글자가 들어 있는 가지만(대소문자 무시) 남기고, 열고, 일치 부분을 굵게 합니다.
	`rows`는 보이는 행의 목록으로, `nodes`, `expandable`, `searchTerm`이 바뀔 때마다 다시 만들어집니다: `{ node, level, last, parentValue, ancestors }`.
	`rows`는 보이는 행의 목록으로, `nodes`, `expandable`, `searchTerm`이 바뀔 때마다 다시 만들어집니다: `{ node, level, last, parentValue, ancestors }`.
	`rows`는 보이는 행의 목록으로, `nodes`, `expandable`, `searchTerm`이 바뀔 때마다 다시 만들어집니다: `{ node, level, last, parentValue, ancestors }`. `expandable: false`면 모든 노드가 보이고 `expanded`는 무시됩니다.
	`expandable: false`면 모든 노드가 보이고 `expanded`는 무시됩니다. 켜져 있으면 조상이 모두 `expanded`인 노드만 보이고, 자식이 있는 노드는 캐럿을 얻습니다. `expandAll`은 모델을 다시 씁니다: `true`는 자식이 있는 모든 노드에 `expanded: true`를, `false`는 모두 `false`를 넣습니다(완료 시점과 값이 바뀔 때마다 적용). 검색어가 있는 동안 남은 가지는 `expanded`와 무관하게 모두 열리고, 각 라벨의 첫 일치 부분이 굵게 그려집니다. 캐럿, 행 더블클릭, 포커스된 행의 Right / Left, 그리고 `expandNode` / `collapseNode` / `toggleExpand`는 모두 같은 경로를 지납니다: 노드의 `expanded`가 뒤집히고, 모델이 커밋되고, `expandChanged`가 발생합니다.
	자식이 있는 모든 노드의 `expanded`를 다시 씁니다 — `true`는 모두 열고 `false`는 모두 닫습니다 — 완료 시점과 값이 바뀔 때마다.
	하위 트리를 체크하고, 조상을 다시 계산하고, 커밋하고 `itemChecked`를 냄. `checkable`과 `disabled`에 무관하게 동작.
	체크 박스가 노드를 토글하면 `setChecked`가 하위 트리 전체에 `checked`를 쓰고 모든 조상을 다시 계산합니다: 자식 전부 체크 → 체크, 일부 체크 또는 indeterminate → `indeterminate`, 없음 → 해제. 데이터의 초기 `checked` 플래그는 그대로 그려집니다(첫 토글 전까지 트리는 정규화하지 않습니다).
	체크 박스가 노드를 토글하면 `setChecked`가 하위 트리 전체에 `checked`를 쓰고 모든 조상을 다시 계산합니다: 자식 전부 체크 → 체크, 일부 체크 또는 indeterminate → `indeterminate`, 없음 → 해제.
	행의 박스가 토글됨(클릭, Space) 또는 `setChecked()` 실행. 조작한 노드와 새 상태를 알림.
	클릭(또는 Return)이 행을 선택합니다: `selectedValue` + `itemSelected`. 노드가 자기 `clickable`을 가질 수도 있습니다.
	선택된 노드의 `value`. 설정하면 시그널 없이 코드에서 선택되고, `""`면 해제됩니다.
	클릭 가능하고 활성인 행이 클릭됨, Return / Space로 선택됨, 또는 `select()` 실행. 클릭 불가·비활성 행에는 없음.
	존재하는 노드에 대해 `selectedValue`를 설정하고 `itemSelected`를 냄. `clickable` / `disabled` 무관.
	코드의 `select(value)`는 `clickable`과 `disabled` 관문을 건너뜁니다. (`disabled: true`)는 흐려지고 호버, 클릭, 포커스, 캐럿, 박스, 동작 버튼을 받지 않습니다.
	캐럿, 행 더블클릭, 포커스된 행의 Right / Left, 그리고 `expandNode` / `collapseNode` / `toggleExpand`는 모두 같은 경로를 지납니다: 노드의 `expanded`가 뒤집히고, 모델이 커밋되고, `expandChanged`가 발생합니다.
	캐럿, 행 더블클릭, 포커스된 행의 Right / Left, 그리고 `expandNode` / `collapseNode` / `toggleExpand`는 모두 같은 경로를 지납니다: 노드의 `expanded`가 뒤집히고, 모델이 커밋되고, `expandChanged`가 발생합니다.
	캐럿, 행 더블클릭, 포커스된 행의 Right / Left, 그리고 `expandNode` / `collapseNode` / `toggleExpand`는 모두 같은 경로를 지납니다: 노드의 `expanded`가 뒤집히고, 모델이 커밋되고, `expandChanged`가 발생합니다.
	캐럿, 행 더블클릭, 포커스된 행의 Right / Left, 그리고 `expandNode` / `collapseNode` / `toggleExpand`는 모두 같은 경로를 지납니다: 노드의 `expanded`가 뒤집히고, 모델이 커밋되고, `expandChanged`가 발생합니다.
	모든 노드(`fixed` 제외)가 제자리 이름 바꾸기 연필 버튼을 얻습니다.
	연필(트리 또는 노드의 `editable`, `fixed`에는 절대 없음), +(노드의 `appendable`), ×(노드의 `removable`, `fixed`에는 절대 없음)는 행이 호버되고 노드가 비활성이 아닐 때 나타납니다.
	연필(트리 또는 노드의 `editable`, `fixed`에는 절대 없음), +(노드의 `appendable`), ×(노드의 `removable`, `fixed`에는 절대 없음)는 행이 호버되고 노드가 비활성이 아닐 때 나타납니다. 함수 `editNode` / `removeNode` / `addChild`는 `editable`, `removable`, `fixed`의 제한을 받지 않습니다.
	추가 행의 플레이스홀더.
	추가 행이 비어 있지 않은 라벨로 확정되거나 `addChild()` 실행 — `manualAdd`여도.
	×가 눌리거나 `removeNode()` 실행 — `manualRemove`여도.
	라벨을 설정하고 커밋하고 `itemEdited`를 냄. `fixed` / `editable` 무시.
	노드와 하위 트리를 지우고 커밋하고 `itemRemoved`를 냄(`manualRemove`면 알리기만). `fixed` / `removable` 무시.
	`{ value: parentValue + "-" + n, label, children: [] }`를 추가하고, 부모를 펼치고, `itemAdded`를 냄. 자식을 반환(부모가 없으면 `null`). `manualAdd`면 알리고 반환만.
	행을 서로의 위로 끌 수 있음: 대상의 앞 / 뒤 / 안. 놓으면 `moveNode()`가 호출되고 `nodeMoved`가 알림.
	행을 다른 행 위로 끄는 동안의 `{ value, target, position }`(`position`은 `"before"` · `"after"` · `"into"`).
	끄는 동안 대상의 위나 아래의 선, 또는 둘레의 틀이 놓일 자리를 보여 주고, `dragState`는 `{ value, target, position }`(`"before"` · `"after"` · `"into"`; 아니면 `null`)입니다. 놓으면 `moveNode(value, targetValue, position)`가 호출되며 코드에서도 부를 수 있습니다: 어느 한 노드를 모르거나 대상이 옮기는 하위 트리 안에 있으면 `false`를 반환하고 아무 일도 하지 않으며, 아니면 변화를 커밋하고(`nodes`가 새 배열을 담음) `nodeMoved({ value, label, targetValue, position })`를 냅니다.
	노드를 `targetValue`의 앞 / 뒤 / 안으로 옮기고(`"before"` · `"after"` · `"into"`; into는 대상도 펼침) 커밋한 뒤 `nodeMoved`를 냄. `true` 반환. 노드를 모르거나 대상이 옮기는 하위 트리 안에 있으면 `false`를 반환하고 아무 일도 하지 않음.
	놓기가 끝났거나 `moveNode()`가 실행되어 노드가 `targetValue`의 앞 / 뒤 / 안으로 옮겨짐.
	체크 박스를 보입니다. 체크는 자손으로 내려가고 조상으로 올라갑니다(`indeterminate`).
	`implicitWidth`는 가장 넓은 행이거나, `nodeWidth`가 설정되면 그 값입니다(그러면 모든 행 배경이 그 폭을 차지하므로 전체 폭 호버/선택 막대에 유용합니다).
	모든 행(과 트리)의 고정 폭. `0` = 가장 넓은 행만큼.
	`implicitHeight`는 보이는 행의 합이라서 트리는 펼침에 따라 늘고 줄어듭니다.

키보드

항목	동작 / 조건
	`SyTreeSelect`(드롭다운 필드 안의 트리), `SyCheckbox`(박스), `SyTag`(`tagMessage` / `tagVariant`), `SyIcon` / `Icons`(`icon`).
	`SyTreeSelect`(드롭다운 필드 안의 트리), `SyCheckbox`(박스), `SyTag`(`tagMessage` / `tagVariant`), `SyIcon` / `Icons`(`icon`).
	라벨 앞의 글리프.

Web API 대응

Web	QML
	setChecked(value,bool)
	selectedValue = ""
	manualAdd: true + onItemAdded + replace nodes
	행을 서로의 위로 끌 수 있음: 대상의 앞 / 뒤 / 안. 놓으면 `moveNode()`가 호출되고 `nodeMoved`가 알림.
	노드를 `targetValue`의 앞 / 뒤 / 안으로 옮기고(`"before"` · `"after"` · `"into"`; into는 대상도 펼침) 커밋한 뒤 `nodeMoved`를 냄. `true` 반환. 노드를 모르거나 대상이 옮기는 하위 트리 안에 있으면 `false`를 반환하고 아무 일도 하지 않음.

Web API 대응

항목	동작 / 조건
	이름 별칭이 아닌 QML 모델 계약입니다. setChecked는 하위 체크와 상위 부분 체크를 계산합니다. selectedValue 직접 초기화는 itemSelected를 만들지 않습니다. manualAdd/manualRemove에서는 요청 신호만 발생하며 호스트가 nodes를 새 배열로 교체해야 완료됩니다.
	모델의 표시 행이 100개 이상이면 화면에 필요한 행만 렌더링합니다. 높이를 지정하면 스크롤할 수 있습니다. scrollTo(value)로 해당 행을 보이게 하고 item(value)로 접근하세요. 화면 밖 행은 null입니다. 위·아래 키로 포커스를 옮기며 자동 스크롤합니다. 인라인 자식 추가를 제공하는 트리는 가변 높이 전체 레이아웃을 유지합니다.

항목

동작 / 조건

이름 별칭이 아닌 QML 모델 계약입니다. setChecked는 하위 체크와 상위 부분 체크를 계산합니다. selectedValue 직접 초기화는 itemSelected를 만들지 않습니다. manualAdd/manualRemove에서는 요청 신호만 발생하며 호스트가 nodes를 새 배열로 교체해야 완료됩니다.

모델의 표시 행이 100개 이상이면 화면에 필요한 행만 렌더링합니다. 높이를 지정하면 스크롤할 수 있습니다. scrollTo(value)로 해당 행을 보이게 하고 item(value)로 접근하세요. 화면 밖 행은 null입니다. 위·아래 키로 포커스를 옮기며 자동 스크롤합니다. 인라인 자식 추가를 제공하는 트리는 가변 높이 전체 레이아웃을 유지합니다.

하나의 디자인 언어.네이티브 앱까지.

컴포넌트

다운로드부터 첫 화면까지

C++ · CMake

Python · PySide6

실행을 확인한 Windows 환경

완성된 두 가지 업무 예제

실제 화면에서 확인하세요

직접 실행하는 Gallery

QML Core

문제 해결

Tree

지원 QML 타입

예제로 보기

01 기본 구성

02 icon · tagMessage · editable · appendable · removable · fixed

03 itemSelected · itemChecked · expandChanged · itemAdded · itemEdited · itemRemoved

04 expandNode · collapseNode · setChecked · select · addChild · editNode · removeNode · findNode

05 계층형 체크박스

06 노드 이름 편집

07 계층 연결선

08 노드 검색

09 전체 노드 탐색

10 선택 없는 계층 보기

속성 · SyTree

속성 · SyTreeItem (행 하나; 트리가 만들며 item(value)로 접근)

메서드

메서드

시그널

시그널

동작

키보드

Web API 대응

Web API 대응

하나의 디자인 언어.
네이티브 앱까지.

속성 · SyTreeItem (행 하나; 트리가 만들며 `item(value)`로 접근)