QML 참조 안내서 03: QML 속성 바인딩

객체의 속성에 새 값이 명시적으로 할당될 때까지 정적 값을 할당할 수 있습니다.그러나 대부분의 QML 객체는 QML 및 동적 객체 동작에 대한 내장된 지원을 최대한 활용하기 위해 속성 바인딩을 사용합니다.
속성 바인딩은 개발자가 다양한 객체 속성 간의 관계를 지정할 수 있도록 하는 QML의 핵심 기능입니다.속성의 의존 항목의 값이 변경되면, 이 속성은 지정한 관계에 따라 자동으로 업데이트됩니다.
백그라운드에서 QML 엔진은 속성의 종속성(즉, 바인딩 표현식의 변수)을 모니터링합니다.변경 사항이 감지되면 QML 엔진은 바인딩 표현식을 다시 계산하고 속성에 새 결과를 적용합니다.

총람하다

속성 바인딩을 만들기 위해 속성에 필요한 값을 계산하는 JavaScript 표현식이 할당됩니다.가장 간단하게 말하면 귀속은 다른 속성에 대한 인용일 수 있다.다음 예제에서는 파란색 Rectangle 높이가 부모 높이에 바인딩됩니다.

Rectangle {
    width: 200; height: 200
    Rectangle {
        width: 100
        height: parent.height
        color: "blue"
    }
}    

부모 사각형의 높이가 변경되면 파란색 사각형의 높이가 자동으로 같은 값으로 업데이트됩니다.
바인딩에는 QML이 표준에 맞는 JavaScript 엔진을 사용하기 때문에 유효한 JavaScript 표현식이나 문이 포함될 수 있습니다.바인딩은 객체 속성에 액세스하고 메서드를 호출하며 내장된 JavaScript 객체(예: Date 및) Math를 사용합니다.다음 예제에서는 가능한 추가 바인딩을 보여 줍니다.

height: parent.height / 2
height: Math.min(parent.width, parent.height)
height: parent.height > 100 ? parent.height : parent.height/2
height: {
    if (parent.height > 100)
        return parent.height
    else
        return parent.height / 2}
height: someMethodThatReturnsHeight()

다음은 보다 복잡한 객체 및 유형에 대한 예입니다.

Column {
    id: column
    width: 200
    height: 200
 
    Rectangle {
        id: topRect
        width: Math.max(bottomRect.width, parent.width/2)
        height: (parent.height / 3) + 10
        color: "yellow"
 
        TextInput {
            id: myTextInput
            text: "Hello QML!"
        }
    }
 
    Rectangle {
        id: bottomRect
        width: 100
        height: 50
        color: myTextInput.text.length <= 10 ? "red" : "blue"
    }
}

이전 예에서는
· topRect.width는bottomRect에 달려 있습니다.width와column.width
· topRect.height는colum에 달려 있다.height
· bottomRect.color는 myTextInput에 달려 있습니다.text.length
문법적으로 귀속이 임의의 복잡성을 가지도록 허용한다.단, 귀속이 너무 복잡할 경우 (예를 들어 여러 줄이나 명령식 순환과 관련된 경우) 이 귀속은 속성 관계를 설명하는 데 사용되었음을 나타낼 수 있습니다.복잡한 귀속은 코드 성능, 읽기 가능성과 유지보수성을 떨어뜨린다.복잡한 귀속을 가진 구성 요소를 다시 설계하거나 최소한 귀속을 단독 기능으로 분해하는 것은 좋은 생각일 수 있다.일반적으로 사용자는 귀속의 평가 순서에 의존해서는 안 된다.

JavaScript에서 속성 바인딩 만들기

바인딩된 속성은 필요에 따라 자동으로 업데이트됩니다.그러나 나중에 JavaScript 문에서 정적 값이 속성에 할당되면 바인딩이 삭제됩니다.
예를 들어, 아래의 직사각형은 처음에 하이라이트가 시종일관 두 배의 width임을 확보했다.그러나 스페이스 바를 누르면 현재 값인 width*3은height를 정적 값으로 분배합니다.그 다음에 이 하이라이트는 이 값에 고정되어 있어도width가 바뀌어도 보존됩니다.정적 값의 분배는 귀속을 삭제합니다.

import QtQuick 2.0
Rectangle {
    width: 100
    height: width * 2
 
    focus: true
    Keys.onSpacePressed: {
        height = width * 3
    }}

직사각형에 고정된 높이를 주고 자동 업데이트를 멈추려면 문제가 되지 않습니다.단, width와 Height 사이에 새로운 관계를 맺으려면 새로운 귀속 표현식을 Qt에 포장해야 한다.binding() 함수:

import QtQuick 2.0
Rectangle {
    width: 100
    height: width * 2
 
    focus: true
    Keys.onSpacePressed: {
        height = Qt.binding(function() { return width * 3 })
    }}

이제 스페이스바를 누르면 사각형의 높이가 너비의 세 배로 계속 자동으로 업데이트됩니다.
바인딩된 덮어쓰기 디버그
QML 응용 프로그램에서 오류가 자주 발생하는 이유는 예기치 않게 JavaScript 문의 정적 값으로 바인딩을 덮어썼기 때문입니다.QML 엔진은 개발자가 이러한 문제를 찾을 수 있도록 강제 할당으로 인해 바인딩이 손실되었을 때 메시지를 보낼 수 있습니다.
이 메시지를 생성하려면 qt를 사용해야 합니다.qml.binding.removal 로그 기록 클래스의 정보 출력입니다. 예를 들어 다음 명령을 호출합니다.
QLoggingCategory::setFilterRules( QStringLiteral( “qt.qml.binding.removal.info = true”));
로깅 범주에서 출력을 활성화하는 방법에 대한 자세한 내용은 QLoggingCategory 설명서를 참조하십시오.
일부 상황에서 귀속을 덮어쓰는 것은 완전히 합리적입니다.QML 엔진에서 생성된 메시지는 추가 조사 없이 문제의 증거로 간주할 필요 없이 진단 지원으로 간주되어야 합니다.

this 속성이 있는 귀속 사용하기

JavaScript에서 속성 바인딩을 만들 때 this 키워드를 사용하여 바인딩된 객체를 참조할 수 있습니다.이것은 속성 명칭의 잘못된 뜻을 해결하는 데 도움이 된다.
예를 들어, Component.onCompleted 아래의 프로세서는 Item 범위 내에서 정의됩니다.이 범위 내에서 width는 Item의 너비이지 Rectangle의 너비가 아닙니다.귀속 사각형의height 자신의width에 이르기까지 결합 표현식은this를 명확하게 언급해야 한다.width(또는 선택 사항, rect.width):

Item {
    width: 500
    height: 500
 
    Rectangle {
        id: rect
        width: 100
        color: "yellow"
    }
 
    Component.onCompleted: {
        rect.height = Qt.binding(function() { return this.width * 2 })
        console.log("rect.height = " + rect.height) // prints 200, not 1000
    }}

주의: 값this는 속성 귀속 외에 정의되지 않았습니다.자세한 내용은 JavaScript 환경 제한을 참조하십시오.