[PyQt5 QT QML] QtQuick 활용하여 Fragment, Loader 구현하기

개발 환경 구현 : https://donggyu.tistory.com/9

Loader 관련 설명 : https://doc.qt.io/qt-5/qml-qtquick-loader.html

💡 실행 화면

💡 Loader는 무엇인가?

로더는 QML 구성 요소를 동적으로로드하는 데 사용됩니다.

로더는 QML 파일 (source 속성 사용) 또는Component 객체 (SourceComponent속성 사용)로드 할 수 있습니다.

구성 요소 생성을 필요할 때까지 지연하는 데 유용합니다.

예를 들어 구성 요소를 요청시 생성해야하거나 성능상의 이유로 구성 요소를 불필요하게 생성해서는 안되는 경우입니다.

💡  Main 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 : "FM 01"
            onClicked: { 
                loader.source = "fragment01.qml"
            } 
        } 
        Button{ 
            id : button02 
            anchors.left : button01.right 
            anchors.leftMargin: 25 
            width: 100 
            height: 50 
            text : "FM 02" 
            onClicked: { 
            loader.source = "fragment02.qml"
            }
        } 
        Button{ 
            id : button03 
            anchors.left : button02.right 
            anchors.leftMargin: 25 
            width: 100 
            height: 50 
            text : "FM 03" 
            onClicked: { 
            loader.source = "fragment03.qml"
            }
        }
    } 
    Loader{ 
        id: loader 
        x : 0 
        y : 100 
        width: parent.width 
        height: parent.height - 100 
        source : "fragment01.qml" 
        }
    }

코드 : https://pastebin.com/8WqZYrNW

 

💡  Fragment.qml (화면 전환) 페이지 생성

화면 전환 시 사용될 수 있는 페이지 3개를 아래와 같이 만들어주세요.

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: "Fragment 01" 
         } 
         Rectangle {
            anchors.fill: parent 
            color: "white" 
            opacity: 0.3 
            } 
    }

코드 : https://pastebin.com/3Uxycpbj