[QT QML] QML Customizing qml databinding : qml 재사용하기

💡 QML Customizing qml databinding

QML 작업을 하다보면 같은 코드 패턴이지만 width, height, anchors만 다르고 나머지는 다 똑같은 경우가 발생한다.

이런 경우 Customizing DataBinding으로 하나의 qml을 만들고 그곳에 signal로 연결하여 사용이 가능하다.

 

그러면 우리는 main에서 같은 코드를 반복할 필요없이 하나의 qml을 만들고 signal과 property를 지정하여 Rectangles로 더 효율적인 코드 활용이 가능하다. 

 

내용이 어렵다면 아래 코드를 참고하면 됩니다.

이 코드를 활용하여 QML MVVM 패턴 View - View Model 활용도 가능합니다. 

💡 main.qml

        Rectangles {
            id: 
            anchors.left: 
            anchors.top:
            width: parent.width
            height: parent.height
            // text에 대한 값은 Rectangle.qml에서 추가하였기 때문에 Rectangles만 추가한 경우에도
            // 동일한 text 값을 이용할 수 있다. 
            text:qsTr("Binding")
            // 클릭에 대한 이벤트이며 각각 이벤트 값을 줄 수 있다.
            onClicked: {
                
            }
        }

 

💡 Rectangles.qml

import QtQuick 2.9
import QtQuick.Controls 2.2

Rectangles {
    id: txt_rectangle
	// 별명 : text 
    // 지정 변수 : b_text -> 값 text
    property alias text: b_text.text
	
    // clicked를 위하여 signal 추가
    signal clicked()
    
    // Rectangle pressed통합 
    Rectangle {
        id: rectangle
        radius: 12
        color: mouseArea.pressed ? "#c9b8ed" : "#9370db"
    }
    
    // Text 통합 main.qml 생성 시 모두 통합된 상태로 qsTr만 작성 
    // 여기에서 값을 지정
    Text {
        id: b_text
        font.family: "Arial"
        opacity: enabled ? 1.0 : 0.3
        anchors.fill: parent
        color: "white"
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
        elide: Text.ElideRight
    }
	
    // 클릭에 대한 값을 설정하지만 각각 다른 이벤트 값을 줄 수 있다.
    MouseArea {
        id: mouseArea
        anchors.fill: parent
        onClicked: txt_rectangle.clicked()
    }
}