개념 - 시각적 부모 Qt Quick

'시각적 부모'

Qt Quick 를 사용하여 시각적 장면을 생성할 때는 시각적 부모의 개념을 이해하는 것이 중요합니다.

Qt Quick 의 시각적 부모 개념은 QObject 부모 계층 구조 내의 객체 부모 개념과는 별개이지만, 이와 관련이 있습니다. 모든 QML 객체에는 객체 부모가 있으며, 이는 객체가 선언된 객체 계층 구조에 의해 결정됩니다. QtQuick 모듈을 사용할 때, Item 유형은 이 모듈에서 제공하는 모든 시각적 항목의 기본 유형이며, 항목의 parent 속성에 의해 정의되는 추가적인 시각적 부모 개념을 제공합니다. 모든 항목에는 시각적 부모가 있습니다. 항목의 parent 속성 값이 null 인 경우, 해당 항목은 씬에 렌더링되지 않습니다.

메모리 관리 목적으로, 항목의 data 속성에 할당된 모든 객체는 QObject 계층 구조 내에서 해당 항목의 자식이 됩니다. 또한, data 속성에 추가된 객체가 Item 유형인 경우, 해당 객체는 Item::children 속성에도 할당되어 시각적 장면 계층 구조 내에서 해당 항목의 자식이 됩니다. (대부분의 Qt Quick 계층 구조 탐색 알고리즘, 특히 렌더링 알고리즘은 시각적 부모 계층 구조만 고려합니다.)

편의를 위해 Item의 data 속성은 기본 속성입니다. 즉, Item 객체 내에서 특정 속성에 할당되지 않은 채 선언된 모든 자식 항목은 자동으로 data 속성에 할당되며, 앞서 설명한 대로 해당 항목의 자식이 됩니다. 따라서 아래의 두 코드 블록은 동일한 결과를 생성하며, 아래 오른쪽에 표시된 명시적인 ` data ` 할당보다는 거의 항상 아래 왼쪽에 표시된 형태를 보게 될 것입니다:

import QtQuick 2.0

Item {
    width: 100; height: 100

    Rectangle { width: 50;
                height: 50;
                color: "red" }
}

import QtQuick 2.0

Item {
    width: 100; height: 100

    data: [
        Rectangle { width: 50;
                    height: 50;
                    color: "red" }
    ]
}

항목의 시각적 상위 항목은 parent 속성을 설정하여 언제든지 변경할 수 있습니다. 따라서 항목의 시각적 상위 항목이 반드시 객체 상위 항목과 동일할 필요는 없습니다.

항목이 다른 항목의 자식이 될 때:

• 자식 항목의 ` parent `은 해당 부모 항목을 가리킵니다.
• 부모 항목의 ` children ` 및 ` childrenRect ` 속성은 해당 자식 항목을 고려합니다

한 항목을 다른 항목의 자식으로 선언한다고 해서, 해당 자식 항목이 부모 항목 내에 맞도록 자동으로 적절한 위치나 크기로 조정되는 것은 아닙니다. 일부 QML 유형은 자식 항목의 배치에 영향을 미치는 내장 동작을 가질 수 있습니다. 예를 들어, ` Row ` 객체는 자식들을 자동으로 수평 배열로 재배치하지만, 이러한 동작은 해당 유형 고유의 구체적인 구현에 의해 강제되는 것입니다. 또한, 부모 항목의 ` clip ` 속성이 true로 설정되어 있지 않는 한, 부모 항목은 자식 항목을 부모의 시각적 경계 내에 시각적으로 포함하도록 자동으로 잘라내지 않습니다.

아래 섹션에서 설명하듯이, 특정 상황에서는 항목의 시각적 부모가 고려 대상이 될 수 있습니다.

항목 좌표

항목 좌표는 시각적 부모를 기준으로 하므로, 시각적 계층 구조의 변경에 영향을 받을 수 있습니다. 자세한 내용은 시각적 좌표 개념 페이지를 참조하십시오.

겹침 순서

Qt Quick 항목은 충돌이 발생할 경우 어떤 항목이 위에 그려질지 결정하기 위해 재귀적 그리기 알고리즘을 사용합니다. 일반적으로 항목은 생성된 순서(또는 QML 파일에서 지정된 순서)대로 상위 항목 위에 그려집니다. 따라서 다음 예제에서 파란색 사각형은 녹색 사각형 위에 그려집니다:

Rectangle {
    color: "#272822"
    width: 320
    height: 480

    Rectangle {
        y: 64
        width: 256
        height: 256
        color: "green"
    }

    Rectangle {
        x: 64
        y: 172
        width: 256
        height: 256
        color: "blue"
    }
}

이 알고리즘은 시각적 항목 계층 구조를 재귀적으로 탐색하므로, 녹색 사각형의 모든 자식 항목도 파란색 사각형 아래와 파란색 사각형의 모든 자식 항목 아래에 그려집니다.

Item::z 속성을 사용하여 중첩 순서를 조정할 수 있습니다. 0보다 작은 z 값은 부모 항목 아래에 중첩되며, z 값이 지정된 경우 형제 항목들은 z 순서대로 중첩됩니다(동일한 z 값인 경우 생성 순서를 기준으로 우선순위를 결정합니다). z 값은 형제 항목 및 부모 항목과의 중첩 순서에만 영향을 미칩니다. 부모 항목보다 상위 노드를 가진 하위 트리에 가려진 항목이 있는 경우, 해당 항목에 어떤 z 값을 지정하더라도 그 하위 트리보다 위에 배치되도록 중첩 순서를 높일 수는 없습니다. 해당 항목을 다른 하위 트리보다 위에 배치하려면 계층 구조의 더 상위 부분에서 z 값을 변경하거나 시각적 항목 계층 구조를 재구성해야 합니다.

Rectangle {
    color: "#272822"
    width: 320
    height: 480

    Rectangle {
        y: 64
        z: 1
        width: 256
        height: 256
        color: "green"

        Rectangle {
            x: 192
            y: 64
            z: 2000
            width: 128
            height: 128
            color: "red"
        }
    }

    Rectangle {
        x: 64
        y: 192
        z: 2
        width: 256
        height: 256
        color: "blue"
    }
}

위의 예시에서 빨간색 사각형은 z 값이 높지만, 여전히 파란색 사각형 아래에 배치됩니다. 이는 빨간색 사각형이 녹색 사각형의 자식이고, 녹색 사각형이 파란색 사각형의 형제 요소이기 때문입니다. 녹색 사각형의 z 값은 파란색 사각형의 z 값보다 낮으므로, 녹색 사각형과 그 모든 자식 요소들은 파란색 사각형 아래에 배치됩니다.

캔버스 소유권

Qt Quick 장면에서 렌더링되는 대상의 정의는 QQuickWindow::contentItem 을 루트로 하는 시각적 항목 트리입니다. 따라서 렌더링을 위해 특정 Qt Quick 장면에 항목을 추가하려면, 해당 항목이 QQuickWindow::contentItem 과 같이 이미 시각적 항목 계층 구조에 존재하는 항목의 시각적 계층 구조 자식이 되어야 합니다.