[C++,QT/Qml]26.Qml프로그래밍 버튼이 있는 팝업 출력하기 1(팝업 영역이 아닌 부분을 클릭시 팝업 닫기)
안녕하세요 고급 개발자가 꿈인 코린이 입니다.
오늘은 ui 앱을 구현하면서 가장 기본적으로 사용하는 팝업에 대해서 포스팅 하겠습니다.
팝업은 평소에 정말 많이 사용을 하고있습니다. 특정한 동작을 했을때 이것을 정말 할것인지 말것인지를
선택을 한다거나 특정한 메시지들을 팝업에 남겨서 중요한 내용이라는 점을 더욱 부각 시킬수 있기때문에
팝업을 많이 사용합니다.
그래서 ui구현중에서 가장 기본인 팝업에 대해서 만들어 보았습니다.
팝업은 qml에서 제공하는 팝업 객체를 사용하면 되는데요
아래의 코드를 보면서 설명 드리겠습니다.
아래의 코드를 qml stackview를 설명드릴때 사용했던 소스코드 입니다. 여기서 팝업을 응용해서 만들어 보겠습니다.
main.qml
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
|
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:400
height:250
x: (parent.width - width) / 2 //팝업의 영역이 현재 화면의 중앙에 오도록 지정
y: (parent.height - height) / 2 //팝업의 영역이 현재 화면의 중앙에 오도록 지정
dim:true
background: Rectangle{
color:"blue"
}
closePolicy: Popup.CloseOnPressOutside //팝업 영역이 아닌곳을 클릭하면 팝업이 닫힘
leftPadding: 0// popup 만들시 기본적으로 설정되는 각 영역들을 모두 없앰
rightPadding: 0
topPadding: 0
bottomPadding: 0
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//배경 색을 지정하는 부분
{
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함수 출력
}
}
}
}
}
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
|
위의 코드를 보시면 아래와 같이 팝업객체를 선언해서 팝업을 디자인한 내용이 보입니다.
팝업 의 배경화면을 파란색으로 지정한후 버튼들을 추가해서 디자인을 했습니다.
만약 이미지로 디자인을 하고싶다면 아래의 배경대신에 이미지를 추가하면 이미지로 배경이 덮혀지게 됩니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
Popup//팝업을 만들어 주기 위한 팝업 객체 선언
{
id:twoButtonPopup
width:400
height:250
x: (parent.width - width) / 2 //팝업의 영역이 현재 화면의 중앙에 오도록 지정
y: (parent.height - height) / 2 //팝업의 영역이 현재 화면의 중앙에 오도록 지정
dim:true
background: Rectangle{
color:"blue"
}
closePolicy: Popup.CloseOnPressOutside //팝업 영역이 아닌곳을 클릭하면 팝업이 닫힘
leftPadding: 0// popup 만들시 기본적으로 설정되는 각 영역들을 모두 없앰
rightPadding: 0
topPadding: 0
bottomPadding: 0
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()
}
}
}
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
|
이 전체 소스코드에서 팝업을 호출하는 방법은 팝업에 지정한 id의 open함수를 사용하면 팝업이 출력되게 됩니다.
|
1
2
3
4
5
6
7
8
9
10
|
Button
{
anchors.top:testText.bottom
anchors.horizontalCenter: parent.horizontalCenter
text:"open popup"
onClicked:
{
twoButtonPopup.open();//버튼을 눌렀을때 팝업이 출력되도록 open함수 출력
}
}
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
|
위와같이 메인화면의 버튼에 onClicked이벤트에 팝업을 출력하는 함수를 넣었습니다.
그리고 버튼이 두개인 팝업이 출력되고 한 버튼은 다음화면으로 넘어가는 버튼을 만들었고
나머지 버튼은 팝업을 닫는 버튼을 만들었습니다.
여기서 다음화면으로 넘어가기 위해서는 팝업을 닫고 다음 화면으로 넘어가도록 닫는 함수와 다음화면으로 넘어가는
코드를 넣었습니다. 내용은 아래와 같습니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
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"))
}
}
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
|
만양 팝업을 안닫고 다음화면으로 넘어가도록 구현을 하면 팝업이 출력되어있는 상태에서 다음 화면으로 가서
다음화면으로 갔을때도 팝업이 출력이되어서 이상동작을 하게 됩니다.
그래서 꼭 팝업을 닫은후에 다음 화면으로 가도록 구현이 필요합니다.
그리고 팝업의 영역이 아닌 다른 영역을 클릭했을때 팝업이 닫히도록 하기 위해서 아래와 같이 속성들을 넣었습니다.
|
1
|
closePolicy: Popup.CloseOnPressOutside //팝업 영역이 아닌곳을 클릭하면 팝업이 닫힘
|
이 closePolicy 의 속성들은 Popup.NoAutoClose,Popup.CloseOnPressOutside,Popup.CloseOnPressOutsideParent,
Popup.CloseOnReleaseOutside, Popup.CloseOnReleaseOutsideParent,Popup.CloseOnEscape 등이 있습니다.
각 내용들은 아래에 설명드리겠습니다.
Popup.NoAutoClose : 팝업을 close등으로 닫지 않는 이상 팝업이 닫히지 않도록 하는 속성이고
Popup.CloseOnPressOutside : 팝업영역 이외의 영역을 마우스 push했을때 팝업이 닫히도록 하는 속성이
Popup.CloseOnReleaseOutside : 팝업이 출력되는 부모의 영역 이외의 영역을 마우스 push했을때 없어지는 속성
부모의 영역이 제가 구현한것처럼 화면의 전체 영역이면 팝업 이외의 영역을 클릭해도 마우스가 없어지지 않음
하지만 부모의 영역을 화면의 전체 영역이 아닌 따로 설정을 해준다면 그 설정한 이외의 영역을 클릭하면
팝업이 닫히도록 구현이 됩니다.
Popup.CloseOnReleaseOutside : 팝업영역 이외의 영역을 마우스 push후 release했을때 팝업이 닫히는 속성
Popup.CloseOnReleaseOutsideParent : 팝업이 출력되는 부모의 영역 이회의 영역을 마우스 push후 release했을때
팝업이 닫히는 속성
Popup.CloseOnEscape : 팝업이 출력되고 ESC키를 눌렀을때 팝업이 닫히도록 하는 속성
이렇게 팝업이 닫히는 속성들을 보았는데요 실제로 팝업을 구현하는 사용자분들께서 입맛에 맞는 속성들을 이용해서
구현하시면 됩니다.
여기까지 팝업에 기본적인 내용들을 다루어 보았는데요 요즘 프로그램들은 팝업을 출력하면 팝업 이외의 영역들은
약간 투명한 검정색으로 칠해는 경우가 많이 있습니다.(팝업을 더욱 강조하기 위해서 팝업 이외의 영역을 살짝 투명한
검정으로 칠해주는 것)
즉 dimming처리를 많이 해주는데요 이 dimming처리에 대한 내용은 다음 포스팅에서 설명 드리겠습니다.
여기까지 읽어주셔서 감사합니다.!
'QT and QML' 카테고리의 다른 글
| [C++,QT/Qml]28.Qml프로그래밍 버튼이 있는 팝업 출력하기 3(custom popup 만들기) (0) | 2019.10.20 |
|---|---|
| [C++,QT/Qml]27.Qml프로그래밍 버튼이 있는 팝업 출력하기 2(팝업 영역이 아닌 부분 gray 처리하기) (0) | 2019.10.20 |
| [C++,QT/Qml]25.Qml프로그래밍 cpp qml 연동4(C++ 에서 qml 함수 호출하기 두번째 방법) (0) | 2019.10.13 |
| [C++,QT/Qml]24.Qml프로그래밍 qml 에서 Enum값 사용하기 (0) | 2019.09.29 |
| [C++,QT/Qml]23.Qml프로그래밍 리스트 스크롤바 만들기2(custom scrollbar 만들기) (0) | 2019.09.22 |