[C++,QT/Qml]30.QML 위치 지정 속성(anchors)

 

 

[C++,QT/Qml]30.QML 위치 지정 속성(anchors)

 

안녕하세요 고급 개발자가 꿈인 코린이 입니다. 

 

여태까지 qml에 대해서 많은 내용을 다루어 봤는데 막상 포스팅한 내용을 보면 완전 기본적인 내용이 아니고

 

항상 예제를 위주로된 내용이 많았습니다.

 

항상 프로그램을 업무로 하는 사람 입장에서는 예제가 있으면 구현하기 편하고 예제가 있으면 알아서 이해도 된다고

 

생각을 했기때문에 예제 위주의 포스팅을 했던것 같습니다. 

 

그렇다 보니 처음 qml접하시는 분들에게는 아주 기초적인 내용도 이해가 잘 되지 않을것 같고 설명 드리지 않았던 

 

내용들이 왜 그렇게 되는 것인지 설명도 너무 부족했던것 같아서 앞으로의 몇개의 포스팅은 qml의 기본적인 

 

내용을 다루어 보려고 합니다.

 

최근 qml에 대한 여러 블로그의 포스팅을 보고 제 블로그의 포스팅을 보니 다른 블로그에 비해

 

제 블로그는 글을 보고계시는 분들이 알아서 이해하도록 예제만 넣어놓아서 너무 불친절하다는 것을 느꼈습니다.

 

그래서 앞으로는 잘 이해가 되도록 좀더 친절하게 기본적이 내용도 설명하고 더 좋은 글을 쓰려고 노력하겠습니다.

 

오늘은 qml의 가장 기본이 되는 위치 지정 속성에 대해서 알아 보도록 하겠습니다.

 

anchor란 영어 사전의 내용으로는 고정시키다라는 단어 입니다.

 

그래서 anchors를 이용해서 특정한 사각형이나 이미지등을 기준으로 왼쪽이나 오른쪽등 위치를 고정할수가 있습니다.

 

그래서 anchors를 사용해서 특정한 사각형 바로 왼쪽에 사각형이 위치하도록 구현을 해보겠습니다.

 

아래 코드를 보겠습니다.

import QtQuick 2.0
 
Item {
    width: 640
    height: 480
    Rectangle
    {
        anchors.fill: parent
        color:"gray"
    }
 
    Rectangle
    {
        id:rect1
        width:100
        height:100
        anchors.centerIn: parent
        color:"green"
        Text {
            id: res1_text1
            text: qsTr("rect1_text1")
            anchors.centerIn: parent
        }
    }
    Rectangle
    {
        id:rect2
        width:100
        height:100
        anchors.right: rect1.left //rect1 의 left에 rect2의 오른쪽을 고정시킨다.       
        color:"red"
        Text {
            id: res2_text1
            text: qsTr("rect2_text1")
            anchors.centerIn: parent
        }
    }
}
 
 
 

 

 

위의 코드를 보시면 rect1의 위치는 anchors.centerIn을 사용해서 parent 즉 rect1의 부모인 Item의 정 중앙에

 

위치 하도록 구현을 했습니다. 그래서 rect1의 경우에는 부모 영역의 정 중앙에 오로록 코딩이 가능합니다.

 

그리고 rect2는 ancrhos.right를 사용해서 rect1의 왼쪽에 rect2의 오른쪽 부분이 위치하도록 구현이

 

되었습니다. 그런데 막상 저희가 해야하는 코드는 rect1의 바로 왼쪽에 rect2가 위치하게 되어야하는데 

 

위에처럼 구현하면 위의 이미지 처럼 rect1의 왼쪽에 위치하기는 하지만 위에 그림이 그려지게 됩니다.

 

그래서 rect1 왼쪽에 바로 위치하기 위해서  아래 코드와 같이 추가를 하시면 됩니다.

 

Rectangle
    {
        id:rect2
        width:100
        height:100
        anchors.right: rect1.left
        anchors.bottom:rect1.bottom // 추가한 내용
        color:"red"
        Text {
            id: res2_text1
            text: qsTr("rect2_text1")
            anchors.centerIn: parent
        }
    }

 

위에처럼 코드를 추가하면 rect2의 아래쪽이 rect1의 아래쪽으로 고정됨으로써 위와같이 rect1의 바로 왼쪽에 위치하게

 

됩니다.

 

그리고 배경화면을 지정하기 위해서 rectangle중에 하나를 부모의 크기와 같이 맞춰놓은 후에 색을 gray로 지정하였습니다.

 

부모의 크기와 같도록 구현을 하기위해서는 anchors.fill을 이용해서 이 채움을 parent로 지정해주면 

 

부모의 영역 만큼 지정이 됩니다.

 

  Rectangle
    {
        anchors.fill: parent // 현재 사각형을 부모의 영역과 같도록 하기위한 속성
        color:"gray"
    }

그렇다면 위의 rect2사각형을 rect1사각형의 위쪽,아래쪽,왼쪽으로 설정하려면 어떻게 구현이 되어야 할까요??

 

각 내용에 대해서는 새로운 사각형을 만들어서 보여 드리겠습니다.

 

import QtQuick 2.0
 
Item {
    width: 640
    height: 480
    Rectangle
    {
        anchors.fill: parent
        color:"gray"
    }
 
    Rectangle
    {
        id:rect1
        width:100
        height:100
        anchors.centerIn: parent
        color:"green"
        Text {
            id: res1_text1
            text: qsTr("rect1_text1")
            anchors.centerIn: parent
        }
    }
    Rectangle
    {
        id:rect2
        width:100
        height:100
        anchors.right: rect1.left
        anchors.bottom:rect1.bottom
        color:"red"
        Text {
            id: res2_text1
            text: qsTr("rect2_text1")
            anchors.centerIn: parent
        }
    }
    Rectangle
    {
        id:rect3
        width:100
        height:100
        anchors.right: rect1.right
        anchors.bottom:rect1.top
        color:"red"
        Text {
            id: res3_text1
            text: qsTr("rect3_text1")
            anchors.centerIn: parent
        }
    }
    Rectangle
    {
        id:rect4
        width:100
        height:100
        anchors.left: rect1.right
        anchors.bottom:rect1.bottom
        color:"red"
        Text {
            id: res4_text1
            text: qsTr("rect4_text1")
            anchors.centerIn: parent
        }
    }
    Rectangle
    {
        id:rect5
        width:100
        height:100
        anchors.left: rect1.left
        anchors.top:rect1.bottom
        color:"red"
        Text {
            id: res5_text1
            text: qsTr("rect5_text1")
            anchors.centerIn: parent
        }
    }
}
 
 
 

 

이번 코드에서는 rect1의 아래 위 왼쪽 오른쪽에 사각형이 위치하도록 구현을 했습니다.

 

소스코드를 보시면 각 사가각형마다 rect1의 사각형의 아래 위 왼쪽 오른쪽에 위치하기위해서

 

ancrhos를 적절하게 넣어주었는데요

 

rect5에 대해서만 간략하게 설명 드리겠습니다.

 

Rectangle
    {
        id:rect5
        width:100
        height:100
        anchors.left: rect1.left
        anchors.top:rect1.bottom
        color:"red"
        Text {
            id: res5_text1
            text: qsTr("rect5_text1")
            anchors.centerIn: parent
        }
    }

rect5는 현재 rect1의 아래 쪽에 있습니다. rect1의 아래쪽에 위치하기 위해서 

 

rect5의 위쪽 부분을 rect1의 아래부분에 위치하도록 했고 rect5 왼쪽부분을 rect1의 왼쪽으로 지정해서 x 좌표로

 

따졌을때 같은 위치에 오도록 구현을 했습니다.

 

여기까지 qml의 기본적인 위치 설정하는 속성에 대해서 설명 드렸습니다. 

 

다은 포스팅에서는 각 아이템들의 정렬하는 방법을 포스팅 할 예정이고 오늘 포스팅과 다음 포스팅을 응용해서

 

두개의 텍스트를 받아와서 이 텍스트들을 합치고 그 텍스트가 항상 중앙 정렬이 되도록 하는 내용을 구현해 보겠습니다.

 

여기까지 읽어주셔서 감사합니다.!