[C++,QT/Qml]28.Qml프로그래밍 버튼이 있는 팝업 출력하기 3(custom popup 만들기)

 

 

[C++,QT/Qml]28.Qml프로그래밍 버튼이 있는 팝업 출력하기 3(custom popup 만들기)

 

 

 

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

 

오늘은 custom type을 만들어서 모든 화면에 custom popup을 적용 하고 각 화면에서 동작이 다른 팝업을 

 

만드는 방법에 대해서 포스팅 하겠습니다.

 

커스텀 팝업을 만들면 각 화면에서 똑같이 출력이 되어야 하나 각 팝업의 동작들은 모두 다르게 해야합니다.

 

그리고 각 팝업의 텍스트 또한 모두 다르게 넣어줄수 있도록 해야합니다.

 

그렇기 때문에 팝업을 출력할때 팝업의 텍스트들을 지정해주고 각 팝업의 동작을들 다르게 할수있도록

 

설정 및 구현부가 필요합니다.

 

그래서 필자는 각 팝업 들의 동작들을 넣어줄수도 있고 각 팝업의 텍스트들을 다르게 넣어줄수 있는

 

custom 타입을 만들어 보았습니다.

 

추후에 custom 타입 팝업을 만들게 되었을때 제 소스를 이용해서 응용하시면 될듯 합니다.

 

일단 처음으로 custom 타입을 만들기 위해서  CustomTwoButtonPopup.qml 파일을 만들었습니다.

 

그리고 아래의 전체 소스와 같이 구현을 했습니다.

 

 

 

CustomTwoButtonPopup.qml

 

import QtQuick 2.0
import QtQuick.Controls 2.0
import QtQuick.Window 2.2
 
Item {    
    x:0
    y:0
    width: 640
    height: 480
 
    signal button1Onclicked()//각 화면의 2버튼 팝업을 출력했을때 각 화면마다 버튼의 동작을 다르게 하도록 시그널을 설정해줌 (button1의 동작을 설저하기 위한 signal)
    signal button2Onclicked()//각 화면의 2버튼 팝업을 출력했을때 각 화면마다 버튼의 동작을 다르게 하도록 시그널을 설정해줌 (button2의 동작을 설저하기 위한 signal)
    Popup//팝업을 만들어 주기 위한 팝업 객체 선언
    {
        id:twoButtonPopup
        width: 640
        height: 480
        leftPadding: 0// popup 만들시 기본적으로 설정되는 각 영역들을 모두 없앰
        rightPadding: 0
        topPadding: 0
        bottomPadding: 0
        background:Rectangle//팝업 dimming 처리를 해주시 위해서 배경화면을 검정색 약간 투명으로 설정해줌
        {
            color:"black"
            opacity:0.7//배경색의 투명도를 설정 해줌
        }
        MouseArea//팝업을 전체 화면으로 설장한 후 파란색 영역 이외의 부분을 클릭했을때 팝업이 닫히도록 설정하는 부분
        {
            anchors.fill: parent
            onClicked:
            {
                closeCustomTwoButtonPopup();
            }
        }
 
        Rectangle
        {
            x:(parent.width - width) / 2 //팝업의 영역이 현재 화면의 중앙에 오도록 지정
            y:(parent.height - height) / 2  //팝업의 영역이 현재 화면의 중앙에 오도록 지정
            width:400
            height:250
            color:"blue"
            MouseArea//팝업의 파란색 영역을 클릭했을때 팝업 종료 이벤트가 발생되지 안도록 선언만 시켜주는 부분
            {
                anchors.fill: parent
            }
            Text
            {
                id:popupInfo
                anchors.centerIn: parent
                text:"test popup"
                color:"black"
                font.pixelSize: 30
                font.bold:true
            }
 
            Button
            {
                id:button1
                anchors.bottom:parent.bottom
                anchors.left: parent.left
                width:190
                height:50
                text:"go next screen"
                onClicked:
                {
                    closeCustomTwoButtonPopup()//각 버튼을 누르면 각자의 동작을 하도록 시그널을 발생시킴
                    button1Onclicked()
                }
            }
            Button
            {
                id:button2
                anchors.bottom:parent.bottom
                anchors.left: button1.right
                anchors.leftMargin: 20
                width:190
                height:50
                text:"close"
                onClicked: {
                    closeCustomTwoButtonPopup()//각 버튼을 누르면 각자의 동작을 하도록 시그널을 발생시킴
                    button2Onclicked()
                }
            }
        }
    }
    function openCustomTwoButtonPopup(info,button1text,button2text){//각 화면의 버튼 팝업의 텍스트를 달리 주기위해서 설정하는 함수
        console.log("openCustomTwoButtonPopup info:" + info + "button1text:" + button1text + "button2text:" + button2text)
        popupInfo.text = info
        button1.text = button1text
        button2.text = button2text
        twoButtonPopup.open()
    }
    function closeCustomTwoButtonPopup()
    {
        console.log("closeCustomTwoButtonPopup")
        twoButtonPopup.close();
    }
 
}
 
 
 

main.qml

import QtQuick 2.9
import QtQuick.Controls 2.0
import QtQuick.Window 2.2
import "./"
 
Window {
    property bool mbImageClicked : true
    property int mCount : 0
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
 
    CustomTwoButtonPopup
    {
        id:customPopup
        onButton1Onclicked: //custom type에서 설정한 signal이 발생되었을때 동작하는 함수(button1Onclicked)
        {
            stackView.push(Qt.resolvedUrl("qrc:/screen1.qml"))
        }
        onButton2Onclicked: //custom type에서 설정한 signal이 발생되었을때 동작하는 함수(button2Onclicked)
        {
            customPopup.closeCustomTwoButtonPopup()//팝업이 닫히도록 CustomTwoButtonPopup 에서 만들어준 함수를 호출
        }
    }
 
    StackView
    {
        id:stackView
        anchors.fill: parent
        initialItem: Item  //제일 첫화면을 설정하는 것으로 설정을 안하면 되돌아오기가 안된다.
        {
            Rectangle//배경 색을 지정하는 부분
            {
                id:background
                anchors.fill: parent
                color:"red"                
            }            
            Text
            {
                id:testData
                anchors.horizontalCenter: parent.horizontalCenter
                text:"main screen testData"
                font.pixelSize: 30
                font.bold: true
            }
 
            Text
            {
                id:testText
                anchors.centerIn: parent
                text:"main screen"
                font.pixelSize: 50
                font.bold: true
            }
            Button
            {
                anchors.top:testText.bottom
                anchors.horizontalCenter: parent.horizontalCenter
                text:"open popup"
                onClicked:
                {
                     customPopup.openCustomTwoButtonPopup("main popup","next screen","close");//버튼을 눌렀을때 custom 팝업이 출력되도록 open함수 출력
                     //각 데이터들을 넣어주어서 버튼 텍스트와 팝업 출력 문구들을 설정해 준다.
                }
            }
        }
    }
}
 
 
 

screen1.qml

import QtQuick 2.0
import QtQuick.Controls 2.0
 
Item {
    width: 640
    height: 480
    objectName: "screen1"//이전화면에 대한 정보를 얻기위해 설정하는 값
 
    Component.onCompleted: {//화면이 집입되고 item이 생성될때 처음으로 불려지는 함수
        console.log("screen1  Component.onCompleted")        
        testData.text = "screen1 Data"//화면이 집입되고 id가 testData인 텍스트를 변경 시킨다.
    }
    Component.onDestruction: {
        console.log("screen1 Component.onDestroyed")
    }
 
    CustomTwoButtonPopup
    {
        id:customPopup
        onButton1Onclicked: //custom type에서 설정한 signal이 발생되었을때 동작하는 함수(button1Onclicked)
        {
            stackView.push(Qt.resolvedUrl("qrc:/screen2.qml"))
        }
        onButton2Onclicked: //custom type에서 설정한 signal이 발생되었을때 동작하는 함수(button2Onclicked)
        {
            stackView.pop();
        }
    }
 
    Rectangle//배경 색을 지정하는 부분
    {
        anchors.fill: parent
        color:"green"
    }
    Text
    {
        id:testData
        anchors.horizontalCenter: parent.horizontalCenter
        text:"screen1 testData"
        font.pixelSize: 30
        font.bold: true
    }
    Text
    {
        id:testText
        anchors.centerIn: parent
        text:"screen1!!"
        font.pixelSize: 50
        font.bold: true
    }
    Button
    {
        id:nextButton
        anchors.top:testText.bottom
        anchors.horizontalCenter: parent.horizontalCenter
        text:"go next screen"
        onClicked: {
             customPopup.openCustomTwoButtonPopup("screen2 popup","go screen2","go previous")
             //stack에 메인화면 두번째화면 세번째 화면이 쌓이게 된다.
        }
    }
    Button
    {
        id:previousButton
        anchors.top:testText.bottom
        anchors.right: nextButton.left
        anchors.rightMargin: 30
        text:"open popup"
        onClicked: {
            console.log("pop screen1")
            stackView.pop();//이전화면을 호출하기위해 stack의 제일 위에 화면을 밖으로 빼주어 첫화면을 보여준다.
        }
    }
}
 
 
 

screen2.qml

import QtQuick 2.0
import QtQuick.Controls 2.0
 
Item {
    width: 640
    height: 480
    objectName: "screen2"//이전화면에 대한 정보를 얻기위해 설정하는 값
    CustomTwoButtonPopup
    {
        id:customPopup
        onButton1Onclicked: //custom type에서 설정한 signal이 발생되었을때 동작하는 함수(button1Onclicked)
        {
            stackView.pop()
        }
        onButton2Onclicked: //custom type에서 설정한 signal이 발생되었을때 동작하는 함수(button2Onclicked)
        {
            customPopup.closeCustomTwoButtonPopup()
        }
    }
    Component.onCompleted: {
        var previousItem = stackView.get(StackView.index - 1);//stackview의 이전 index의 objectName을 가져온다.
 
        console.log("previousItem:" + previousItem);
 
        if(previousItem.objectName === "mainscreen"){//index의 objectName을 비교해서 이전 화면이 무엇인지 알수있다.
            console.log("previousItem === mainscreen")
            testData.text = "previous screen is mainscreen"
        }else if(previousItem.objectName === "screen1"){
            console.log("previousItem === screen1")
            testData.text = "previous screen is screen1"
        }else
             console.log("else!!")
    }
 
    Rectangle
    {
        anchors.fill: parent
        color:"blue"
    }
    Text
    {
        id:testData
        anchors.horizontalCenter: parent.horizontalCenter
        text:"screen2 testData"
        font.pixelSize: 30
        font.bold: true
    }
    Text
    {
        id:testText
        anchors.centerIn: parent
        text:"screen2!!"
        font.pixelSize: 50
        font.bold: true
    }
    Button
    {
        id:previousButton
        anchors.top:testText.bottom
        anchors.horizontalCenter: parent.horizontalCenter
        text:"open popup"
        onClicked: {
            customPopup.openCustomTwoButtonPopup("screen2 popup","go previous","close popup");
            //stackView.pop();//이전화면을 호출하기위해 stack의 제일 위에 화면을 밖으로 빼주어 두번째 화면을 보여준다.
        }
    }
}
 
 
 

아래 동영상은 위의 소스코드를 실행한 동영상입니다.

 

CustomTwoButtonPopup.qml 파일을 먼저 보겠습니다.

 

여기서 팝업에 대한 레이아웃 위치등을 설정한후 각 화면에서 설정한 텍스트들이 들어갈수 있도록 아래와 같이 

 

함수를 만들어서 설정해 줍니다.

 

아래 소스코드를 보면 각 버튼에 대한 텍스트와 팝업에 대한 텍스트들을 설정할수가 있습니다.

function openCustomTwoButtonPopup(info,button1text,button2text){//각 화면의 버튼 팝업의 텍스트를 달리 주기위해서 설정하는 함수
        console.log("openCustomTwoButtonPopup info:" + info + "button1text:" + button1text + "button2text:" + button2text)
        popupInfo.text = info
        button1.text = button1text
        button2.text = button2text
        twoButtonPopup.open()
    }

각 화면에서 위의 함수를 호출해주면 넣어준 매개변수에 따라서 팝업의 내용과 버튼의 텍스트들을 변경해 줄수가

 

있습니다.

 

각 화면에서 팝업을 호출하는 방법은 아래와 같습니다.

 

Button
    {
        id:previousButton
        anchors.top:testText.bottom
        anchors.horizontalCenter: parent.horizontalCenter
        text:"open popup"
        onClicked: {
            customPopup.openCustomTwoButtonPopup("screen2 popup","go previous","close popup");
            //stackView.pop();//이전화면을 호출하기위해 stack의 제일 위에 화면을 밖으로 빼주어 두번째 화면을 보여준다.
        }
    }

 

 

위와 같이 설정해줄 텍스트들을 매개변수에 넣어서 각 화면에서 출력될때마다 다르게 출력되도록 하는 버튼 팝업을 

 

호출해 줍니다.

 

CustomTwoButtonPopup
    {
        id:customPopup
        onButton1Onclicked: //custom type에서 설정한 signal이 발생되었을때 동작하는 함수(button1Onclicked)
        {
            stackView.push(Qt.resolvedUrl("qrc:/screen1.qml"))
        }
        onButton2Onclicked: //custom type에서 설정한 signal이 발생되었을때 동작하는 함수(button2Onclicked)
        {
            customPopup.closeCustomTwoButtonPopup()//팝업이 닫히도록 CustomTwoButtonPopup 에서 만들어준 함수를 호출
        }
    }

그리고 각 화면에서 위와 같이 팝업의 객체를 만들어주고 각 버튼의 시그널들에 대한 동작들을 설정해 줍니다.

 

이 시그널들은 CustomTwoButtonPopup에서 설정한 시그널로 각 시그널들이 발생되면 

 

위의 onButton1Onclicked 와 onButton2Oncliked 들이 실행이 됩니다.

 

Button
            {
                id:button1
                anchors.bottom:parent.bottom
                anchors.left: parent.left
                width:190
                height:50
                text:"go next screen"
                onClicked:
                {
                    closeCustomTwoButtonPopup()//각 버튼을 누르면 각자의 동작을 하도록 시그널을 발생시킴
                    button1Onclicked()
                }
            }
            Button
            {
                id:button2
                anchors.bottom:parent.bottom
                anchors.left: button1.right
                anchors.leftMargin: 20
                width:190
                height:50
                text:"close"
                onClicked: {
                    closeCustomTwoButtonPopup()//각 버튼을 누르면 각자의 동작을 하도록 시그널을 발생시킴
                    button2Onclicked()
                }
            }

위의 소스와 같이 팝업의 각 버튼을 클릭하면 그에 맞는 시그널을 발생 시켜서 이전에 설정한 객체에서 각 동작을

 

선언할수 있도록 구현이 가능합니다.

 

각 팝업출력이 필요한 화면에서도 CustomTwoButtonPopup 객체를 만들어서 각 버튼에 대한 실행 로직을 넣어주면

 

각화면에 맞는 팝업과 동작을 다르게 해줄수 있는 custom type을 만들수가 있습니다.

 

위의 실행 영상과 같이 각 화면의 동작이 모두 다르게 구현을 했습니다.

 

위와 같은 내용을 응용한다면 custom 팝업 이외에도 다른 custom type을 만들어서 각 화면에서 다르게 동작이

 

가능하도록 구현이 가능합니다.

 

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