한국어
Qt
 

QML에는 Grid, Row 및 Column 외에도 앵커 개념을 사용하여 아이템을 상대적으로 배치하는 방법을 제공한다. 이 앵커링 시스템을 사용하면 서로 다른 아이템의 앵커 라인 간의 관계를 정의할 수 있다. 다시말해 하나의 아이템은 다른 아이템(부모 아이템 또는 형제 아이템)을 기준으로 앵커 라인에 배치할 수 있다.

각 아이템에는 앵커 라인이라고 하는 7개의 가상 라인이 있으며 아래 이미지는 그 중 6개를 나타낸것이다.

1.png

7번째 앵커인 baseline 은 텍스트 아이템의 텍스트가 놓이는 가상의 선이다. g나 y와 같은 문자의 경우 디센더가 baseline 아래로 내려간다. 텍스트가 아닌 아이템의 경우 top과 동일하다.

이 7개의 앵커 라인 속성 중 하나를 사용하여 항목을 배치할 수 있다.

다음의 간단한 예제에서 rect2의 왼쪽 가장자리는 rect1의 오른쪽 가장자리에 바인딩된다.

...
// width, height 등의 속성 정의가 생략되었다.

Rectangle { id: rect1; ... }
Rectangle { id: rect2; anchors.left: rect1.right; ... }

...

이렇게 배치된다.

2.png

앵커의 다른 조합을 사용하여 원하는 다른 직사각형 배치를 할 수 있다. 크기도 조절할 수 있다.

Example 1

(0, 0)에 녹색 사각형이 있다. 바로 아래에 파란색 사각형을 정렬해보자.

3.png

파란색 직사각형의 top 앵커 라인을 녹색 직사각형의 bottom 앵커 라인과 정렬되고 파란색 직사각형의 left 앵커 라인을 녹색 직사각형의 left 앵커 라인이 각각 정렬된다. 다음은 이것을 구현한 코드이다.

...
Rectangle {
    id: greenRect
    width: 100
    height: width/2
    color: "green"
}

Rectangle {
    id: blueRect
    width: 150
    height: width/2
    color: "blue"
    anchors{
        left: greenRect.left
        top: greenRect.bottom
    }
}
...

Example 2

파란색 사각형을 녹색 사각형의 오른쪽에 정렬시켜보자.

4.png

이번에는 파란색 직사각형의 left 앵커 라인을 녹색 직사각형의 right 앵커 라인에 맞추고 파란색 사각형의 top 앵커라인은 정확히 녹색 사각형의 verticalCenter (수직방향 중앙)에 배치한다.

...

    Rectangle {
        id: greenRect
        width: 100
        height: width/2
        color: "green"
    }

    Rectangle {
        id: blueRect
        width: 150
        height: width/2
        color: "blue"
        anchors{
            left: greenRect.right
            top: greenRect.verticalCenter
        }
    }

...

Example 3

여러 아이템들간의 앵커를 지정하여 레이아웃을 제어할 수 있다.

5.png

Rect2는 Rect1의 오른쪽과 Rect3의 왼쪽에 고정된다. 윈도우의 크기가 늘어나고 줄어듬에 따라 파란색 사각형이 늘어나고 축소된다.

Window{
    visible: true
    width: 640
    height: 480

    Rectangle { id: rect1; width: 100; height: parent.height; color: "green"; anchors.left: parent.left }
    Rectangle { id: rect2; height: parent.height; color: "blue"; anchors.left: rect1.right; anchors.right: rect3.left }
    Rectangle { id: rect3; width: 100; height: parent.height; color: "green"; anchors.right: parent.right }
}

Example 4

매우 유용한 두개 속성 fillcenterIn

6.png

centerIn 을 사용하면 verticalCenter와 horizontalCenter 앵커 조합을 한 것 처럼 완전히 중앙에 정렬된다. fill 의 경우 설정한 아이템의 크기로 완전히 채운다. 즉 대상 아이템의 left, right, top, bottom 앵커를 left, right, top, bottom 로 설정하는 것과 같은 편리함을 제공한다. 일반적으로 verticalCenter 및 horizontalCenter 를 제외한 모든 앵커 라인은 완전히 정렬된다.

...
Rectangle {
    id: textBox
    border.width: 1
    width: textItem.paintedWidth
    height: textItem.paintedHeight

    anchors.centerIn: parent
}

Text {
    id: textItem
    text: qsTr("anchors centerIn and fill textBox.")
    font.pixelSize: 22

    anchors.fill: textBox
}
...

Example 5

아이템간의 앵커에 대해 여백과 오프셋을 지정할 수 있다. 마진은 아이템의 앵커 외부에 남겨둘 빈 공간의 양을 지정한다.

7.png

앵커 여백을 설정하여 아이템을 정렬해보자.

8.png

...
Rectangle {
    id: rect1
    border.width: 1
    width: 100
    height: width

    anchors.centerIn: parent
}

Rectangle {
    color: "lightgreen"
    anchors{
        fill: rect1
        topMargin: 20
        leftMargin: 20
        rightMargin: 20
        bottomMargin: 20
    }
}
...

Example 6

옵셋은 중앙 앵커 라인을 기준으로 위치를 조작할 수 있다. 앵커 옵셋은 horizontalCenterOffset, verticalCenterOffset 및 baselineOffset을 사용하여 지정된다.

9.png

...
Rectangle {
    id: rect1
    border.width: 1
    width: 100
    height: width

    anchors.centerIn: parent
}

Rectangle {
    width: 100
    height: width
    color: "lightgreen"
    anchors{
        centerIn: rect1
        horizontalCenterOffset: rect1.width/2
        verticalCenterOffset: rect1.height/2
    }
}
...
번호 제목 글쓴이 날짜 조회 수
공지 Qt프로그래밍(QtQuick) Beginner를 위한 글 읽는 순서 운영자 2019.01.05 31581
» QML에서 앵커(anchors)로 위치 지정 file makersweb 2021.10.05 37
148 안드로이드용 Qt 6.2 makersweb 2021.10.02 29
147 Qt 응용프로그램에서 PDF 문서 렌더링 file makersweb 2021.09.23 32
146 QML에서 Websocket 서버와 통신 file makersweb 2021.09.18 39
145 QML 코딩 규칙 makersweb 2021.09.05 208
144 QML 에서 QR코드 생성 file makersweb 2021.08.20 95
143 앱을 종료할 때 QML 바인딩 오류를 피하는 방법 makersweb 2021.08.08 45
142 Qt 응용프로그램에서 Lottie Animation사용 file makersweb 2021.05.30 268
141 싱글 샷(Single-Shot) 시그널/슬롯 연결 makersweb 2021.05.12 193
140 응용프로그램 자동실행 설정 (on Windows) makersweb 2021.05.08 164
139 Qt 6 에서 프로퍼티 바인딩 makersweb 2021.04.03 254
138 QML과 JavaScript 의 숫자 관련 내장된 함수 makersweb 2021.03.28 181
137 Qt 5 코드를 Qt 6로 포팅하기 위해 도움이 되는 Clazy Framework file makersweb 2021.03.01 279
136 C++로 작성한 클래스를 QML에서 생성 file makersweb 2021.02.10 1014
135 Qt MQTT의 pus/sub 튜토리얼 file makersweb 2021.02.06 466
134 Qt 를 사용하거나 기반으로 하는 응용프로그램 file makersweb 2021.01.30 1033
133 Loader를 사용하여 동적으로 QML 로드 makersweb 2021.01.19 499
132 QThread 및 QMutex 예제 makersweb 2021.01.12 387
131 그래픽 소프트웨어에서 디자인 내보내기 (Exporting Designs from Graphics Software) j2doll 2020.12.25 173
130 Qt5Compat 라이브러리를 사용하여 Qt5에서 Qt6로 포팅 [2] makersweb 2020.12.05 298