UI 파일

Qt Quick UI 프로토타입 프로젝트를 만들거나 Qt Creator 과 Qt Design Studio 사이를 전환하는 경우 프로젝트에 UI 파일(.ui.qml)이 포함될 수 있습니다. 이 파일은 Qt Quick 디자이너 또는 Qt Design Studio 에서만 편집해야 합니다.

기본적으로 Qt Creator 은 Design 모드에서 UI 파일을 엽니다. Qt Design Studio 로 열려면 Open With > Qt Design Studio 를 선택합니다( File System 또는 Projects 보기의 컨텍스트 메뉴에서).

.ui.qml 파일에서는 다음 기능이 지원되지 않습니다:

• 자바스크립트 블록
• 순수 표현식이 아닌 다른 바인딩
• 신호 핸들러
• 루트 컴포넌트가 아닌 다른 컴포넌트의 상태
• QQuickItem 에서 파생되지 않은 루트 컴포넌트 또는 Item
• 루트 컴포넌트의 부모 참조

다음 컴포넌트는 지원되지 않습니다:

• 비헤이비어
• Binding
• 캔버스
• 셰이더 효과
• 타이머
• 트랜스폼

지원되는 메서드

Qt Creator 는 QML 엔진에서 지원되는 대부분의 JavaScript 함수와 Qt QML 메서드의 하위 집합을 지원합니다.

이 섹션에는 .ui.qml 파일에서 사용할 수 있는 함수가 나열되어 있습니다.

JavaScript 함수

일반적으로 순수 함수가 지원됩니다. 순수 함수는 해당 범위 내에 있는 매개변수의 상태에만 의존하고 수정하므로 동일한 매개변수가 주어지면 항상 동일한 결과를 반환합니다. 따라서 .ui.qml 파일을 손상시키지 않고 속성 바인딩을 변환하고 다시 포맷할 수 있습니다.

지원되는 JavaScript 함수는 다음과 같습니다:

• charAt()
• charCodeAt()
• concat()
• endsWith()
• includes()
• indexOf()
• isFinite()
• isNaN()
• lastIndexOf()
• substring()
• toExponential()
• toFixed()
• toLocaleLowerCase()
• toLocaleString
• toLocaleUpperCase()
• toLowerCase()
• toPrecision()
• toString()
• toUpperCase()
• valueOf()

또한 Math 및 Date 객체의 모든 함수가 지원됩니다.

자세한 내용은 JavaScript 객체 및 함수 목록을 참조하세요.

Qt Qml 메서드

Qt Creator 는 색상 메서드, 특정 데이터 유형의 객체를 만들기 위한 헬퍼 메서드 및 번역 메서드를 지원합니다.

지원되는 색상 메서드는 다음과 같습니다:

• Qt.darker()
• Qt.hsla()
• Qt.hsva()
• Qt.lighter()
• Qt.rgba()
• Qt.tint()

지원되는 헬퍼 메서드는 다음과 같습니다:

• Qt.formatDate()
• Qt.formatDateTime()
• Qt.formatTime()
• Qt.matrix4x4()
• Qt.point()
• Qt.quaternion()
• Qt.rect()
• Qt.size()
• Qt.vector2d()
• Qt.vector3d()
• Qt.vector4d()

지원되는 번역 메서드는 다음과 같습니다:

• qsTr()
• qsTranslate()
• QT_TRANSLATE_NOOP()
• qsTrId()
• QT_TRID_NOOP()
• QT_TR_NOOP()

메서드 사용에 대한 자세한 내용은 Qt Qml 메서드를 참조하십시오.

UI 파일 사용하기

Design 모드에서 UI 파일을 편집합니다. 코드에서 컴포넌트를 사용하려면 프로퍼티로 내보냅니다:

Item {
    width: 640
    height: 480

    property alias button: button

    Button {
        anchors.centerIn: parent
        id: button
        text: qsTr("Press Me")
    }
}

속성 별칭은 버튼을 해당 폼을 사용하는 코드로 내보냅니다. Navigator 에서 (Export) 버튼을 사용하여 컴포넌트를 프로퍼티로 내보낼 수 있습니다:

예를 들어 컴포넌트가 사용되는 UI 파일에서 button 속성 별칭을 사용하여 신호 핸들러를 구현할 수 있습니다. 다음 코드 스니펫에서 UI 파일은 MainForm.ui.qml 입니다:

MainForm {
    anchors.fill: parent
    button.onClicked: messageDialog.show(qsTr("Button pressed"))
}

프로퍼티를 할당하거나 동작 또는 전환을 정의할 수도 있습니다.

2D 또는 Navigator 보기에서 .qml 파일의 컴포넌트 구현으로 바로 이동하려면 컴포넌트를 마우스 오른쪽 버튼으로 클릭하고 컨텍스트 메뉴에서 Go to Implementation 을 선택합니다.