상세 컨텐츠

본문 제목

[QT QML] QT QML anchors, parent등을 활용한 위치 속성 값 지정하기

QT|QML

by donggyu1998 2021. 7. 8. 18:54

본문

반응형

💡 가운데 설정

import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 1.4

Window {
    visible: true

    width: 800
    height: 680

    title: qsTr("위치 속성 지정")
    
    Button {
        id: btn_center
        anchors.centerIn: parent
        width: 130
        height: 50
        text: "가운데 버튼"
    }
}

💡 실행 사진

💡 가운데 버튼 왼쪽에 위치 넣기

import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 1.4

Window {
    visible: true

    width: 800
    height: 680

    title: qsTr("위치 속성 지정")
    
    Button {
        id: btn_center
        anchors.centerIn: parent
        width: 130
        height: 50
        text: "가운데 버튼"
    }
    Button {
        id: btn_left
        anchors.right: btn_center.left
        anchors.bottom: btn_center.bottom
        width: 130
        height: 50
        text: "왼쪽 버튼"
    }
}

💡 실행 사진

💡 가운데 버튼 오른쪽에 위치 넣기

import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 1.4

Window {
    visible: true

    width: 800
    height: 680

    title: qsTr("위치 속성 지정")
    
    Button {
        id: btn_center
        anchors.centerIn: parent
        width: 130
        height: 50
        text: "가운데 버튼"
    }
    Button {
        id: btn_left
        anchors.right: btn_center.left
        anchors.bottom: btn_center.bottom
        width: 130
        height: 50
        text: "왼쪽 버튼"
    }
    Button {
        id: btn_right
        anchors.left: btn_center.right
        anchors.bottom: btn_center.bottom
        width: 130
        height: 50
        text: "오른쪽 버튼"
    }
}

💡 실행 사진

💡 가운데 버튼 위에 버튼 넣기

import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 1.4

Window {
    visible: true

    width: 800
    height: 680

    title: qsTr("위치 속성 지정")
    
    Button {
        id: btn_center
        anchors.centerIn: parent
        width: 130
        height: 50
        text: "가운데 버튼"
    }
    Button {
        id: btn_left
        anchors.right: btn_center.left
        anchors.bottom: btn_center.bottom
        width: 130
        height: 50
        text: "왼쪽 버튼"
    }
    Button {
        id: btn_right
        anchors.left: btn_center.right
        anchors.bottom: btn_center.bottom
        width: 130
        height: 50
        text: "오른쪽 버튼"
    }
    Button {
        id: btn_top
        anchors.right: btn_center.right
        anchors.bottom: btn_center.top
        width: 130
        height: 50
        text: "가운데 위에 버튼"
    }
}

💡 실행 사진

💡 가운데 아래에 버튼 넣기

import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 1.4

Window {
    visible: true

    width: 800
    height: 680

    title: qsTr("위치 속성 지정")
    
    Button {
        id: btn_center
        anchors.centerIn: parent
        width: 130
        height: 50
        text: "가운데 버튼"
    }
    Button {
        id: btn_left
        anchors.right: btn_center.left
        anchors.bottom: btn_center.bottom
        width: 130
        height: 50
        text: "왼쪽 버튼"
    }
    Button {
        id: btn_right
        anchors.left: btn_center.right
        anchors.bottom: btn_center.bottom
        width: 130
        height: 50
        text: "오른쪽 버튼"
    }
    Button {
        id: btn_top
        anchors.right: btn_center.right
        anchors.bottom: btn_center.top
        width: 130
        height: 50
        text: "가운데 위에 버튼"
    }
    Button {
        id: btn_bottom
        anchors.left: btn_center.left
        anchors.top: btn_center.bottom
        width: 130
        height: 50
        text: "가운데 아래 버튼"
    }
}

💡 실행 사진

💡 horizontalCenter , verticalCenter

반응형

'QT|QML' 카테고리의 다른 글

[C++ QT QML] C++과 QML을 이용하여 QML 계산기 만들기 QML calculator  (0) 2021.07.08
[QT QML Code] QML Loading spinner with animated image  (0) 2021.07.02
[QT QML] QML Spin Progress Spinner  (0) 2021.07.01
[QT QML] QML Code Conventions , QML 기초, 기본적인 기초  (0) 2021.07.01
[QT QML] QML Customizing qml databinding : qml 재사용하기  (0) 2021.06.30

관련글 더보기

티스토리툴바