[C++,QT/Qml]27.Qml프로그래밍 버튼이 있는 팝업 출력하기 2(팝업 영역이 아닌 부분 gray 처리하기)

 

[C++,QT/Qml]27.Qml프로그래밍 버튼이 있는 팝업 출력하기 2(팝업 영역이 아닌 부분 gray 처리하기)

 

 

 

 

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

 

오늘은 qml에서 팝업을 출력한 후 팝업 이외의 부분을 dimming처리 하는것을 해보겠습니다.

 

dimming 처리란 팝업이 출력이 되면 팝업을 강조하고 이외의 영역은 비활성화 된다는 것을 사용자에게 보여주기위해서

 

처리하는 부분으로 핸드폰 어플이나 다른 여러 앱에서 팝업 출력시 이외의 부분을 약간 투명한 검정색으로 색칠되어

 

있는 것을 말합니다.

 

그래서 오늘은 팝업이 출력되면 이외의 부분이 약간 투명한 검정색으로 색칠되어서 이외영역은 비할성화 

 

된다는 것을 보여주는 기능을 만들어 보겠습니다.

 

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")
    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:
            {
                twoButtonPopup.close();
            }
        }
 
        Rectangle
        {
            x:(parent.width - width) / 2 //팝업의 영역이 현재 화면의 중앙에 오도록 지정
            y:(parent.height - height) / 2  //팝업의 영역이 현재 화면의 중앙에 오도록 지정
            width:400
            height:250
            color:"blue"
            MouseArea//팝업의 파란색 영역을 클릭했을때 팝업 종료 이벤트가 발생되지 안도록 선언만 시켜주는 부분
            {
                anchors.fill: parent
            }
            Text
            {
                anchors.centerIn: parent
                text:"test popup"
                color:"black"
                font.pixelSize: 30
                font.bold:true
            }
 
            Button
            {
                id:nextScreenButton
                anchors.bottom:parent.bottom
                anchors.left: parent.left
                width:190
                height:50
                text:"go next screen"
                onClicked://버튼을 누르면 팝업이 닫힘과 동시에 다음 화면으로 넘어가도록 구현
                {
                    twoButtonPopup.close()
                    stackView.push(Qt.resolvedUrl("qrc:/screen1.qml"))
                }
            }
            Button
            {
                id:closeButton
                anchors.bottom:parent.bottom
                anchors.left: nextScreenButton.right
                anchors.leftMargin: 20
                width:190
                height:50
                text:"close"
                onClicked: {//버튼을 누르면 파법이 닫히도록 구현
                    twoButtonPopup.close()
                }
            }
        }
    }
 
    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:
                {
                     twoButtonPopup.open();//버튼을 눌렀을때 팝업이 출력되도록 open함수 출력
                }
            }
        }
    }
}
 
 
 

 

 

위의 소스코드를 보겠습니다.

 

일단 팝업의 영역을 이전 포스팅과 다르게 전체 화면으로 설정을 해주었습니다.

 

그래야 팝업이 출력되었을때 배경화면을 투명한 검정색으로 만들어 주어서 팝업 이외의 영역이 비활성화 된다는 것을

 

보여 줄수 있습니다.

 

그리고 실제 팝업이 그려지는 부분을 Rectangle로 그려서 마치 배경화면이 투명한 검정이고 팝업의 배경화면이 

 

파란색인 팝업이 그려진것 처럼 그려질수가 있습니다.

 

실제로는 팝업의 배경화면은 투명한 검정색인데 말이죠 ㅎㅎ

 

그런다음 팝업의 전체 클릭 영역을 클릭하면 팝업이 닫히도록 설정해 줍니다.

 

MouseArea//팝업을 전체 화면으로 설장한 후 파란색 영역 이외의 부분을 클릭했을때 팝업이 닫히도록 설정하는 부분
        {
            anchors.fill: parent
            onClicked:
            {
                twoButtonPopup.close();
            }
        }
 

위와같이 팝업의 전체화면을 클릭하면 팝업이 닫히도록 해주었는데요 여기서 한가지 의문점이 들게 됩니다.

 

팝업의 전체화면이면 파란색 영역의 배경화면을 클릭해도 닫히는 것이 아닌가요 라는 의문이 들게 되는데

 

위와 같은 소스만 추가한다면 당연히 팝업의 파란색 영역을 클릭해도 닫히도록 구현이 됩니다.

 

그래서 팝업의 파란색 영역 즉 실제 팝업의 내용이 출력되는 부분의 영역에 mouseArea로 감아주어서

 

파란색 영역을 클릭했을때 아무동작을 안하도록 구현할수가 있습니다.

 

Rectangle
        {
            x:(parent.width - width) / 2 //팝업의 영역이 현재 화면의 중앙에 오도록 지정
            y:(parent.height - height) / 2  //팝업의 영역이 현재 화면의 중앙에 오도록 지정
            width:400
            height:250
            color:"blue"
            MouseArea//팝업의 파란색 영역을 클릭했을때 팝업 종료 이벤트가 발생되지 안도록 선언만 시켜주는 부분
            {
                anchors.fill: parent
            }

위와같이 실제 팝업이 출력되는 rectangle의 영역에 MouseArea를 넣어주어서 클릭 파란색 영역을 클릭했을때 아무동작을

하지 않도록 구현을 해주면 dimming처리 된 부분만 클릭하면 팝업이 닫히도록 구현이 가능합니다.

 

여기까지 팝업의 dimming처리에 대해서 구현을 했는데요

 

만약 이 팝업이 한화면에서말고도 다른 화면에서도 모두 출력되야한다면 어떻게 구현을 해야할까요??

 

모든 화면에 위와같은 팝업 구현 소스를 모두 넣어주어야할까요?? 그렇다면 소스코드가 너무 길어져서

 

효율성이 떨어지게 됩니다.

 

그래서 다음 포스팅에서는 custom type을 만들어서 팝업을 출력하고 

 

custom type에서 각 버튼의 동작을 다르게 동작하게 하고 각 버튼의 텍스트로 모두 다르게 구현할수 있는 방법을 

 

포스팅 하겠습니다.

 

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