[QT, QML] button, loader 사용

# QT Version : 5.12 
# QT Creatpr Version : 4.11
# Project name : project01

My_Github_Link

간단히 button을 눌러서 간단히 하위 Item을 전환하는 작업을 해봤다.

일단 결과물...

간단히 위에 버튼 3개 만들고 각 버튼이 눌리면 해당 탭에 맞는 qml을 로드 하도록 만들었다.

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Item{
        x : 0
        y : 0
        width: parent.width
        height: 50
        Button{
            id : button01
            x : 0
            y : 0
            width: 100
            height: 50
            text : "btn01"
            onClicked: {
                loader.source = "tab01.qml"
            }
        }

        Button{
            id : button02
            anchors.left : button01.right
            anchors.leftMargin: 25
            width: 100
            height: 50
            text : "btn02"
            onClicked: {
                loader.source = "tab02.qml"
            }
        }

        Button{
            id : button03
            anchors.left : button02.right
            anchors.leftMargin: 25
            width: 100
            height: 50
            text : "btn03"
            onClicked: {
                loader.source = "tab03.qml"
            }
        }
    }

    Loader{
        id: loader
        x : 0
        y : 100
        width: parent.width
        height: parent.height - 100
        source : "tab01.qml"
        onSourceChanged: animation.running = true
        NumberAnimation {
            id: animation
            target: loader.item
            property: "x"
            from: loader.width
            to : 0
            duration: 500
            easing.type: Easing.InExpo
        }
    }
}

tab01.qml

import QtQuick 2.0

Item {
    id: tab01
    width: parent.width
    height: parent.height

    Text{
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter:  parent.verticalCenter
        font.pixelSize: 30
        text: "Tab01"
    }

    Rectangle
    {
        anchors.fill: parent
        color: "blue"
        opacity: 0.3
    }

}

tab02.qml

import QtQuick 2.0

Item {
    id: tab02
    width: parent.width
    height: parent.height

    Text{
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter:  parent.verticalCenter
        font.pixelSize: 30
        text: "Tab02"
    }

    Rectangle
    {
        anchors.fill: parent
        color: "red"
        opacity: 0.3
    }

}

tab03.qml

import QtQuick 2.0

Item {
    id: tab03
    width: parent.width
    height: parent.height

    Text{
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter:  parent.verticalCenter
        font.pixelSize: 30
        text: "Tab03"
    }

    Rectangle
    {
        anchors.fill: parent
        color: "Green"
        opacity: 0.3
    }

}