반응형
[C++,QT/Qml]11.Qml프로그래밍 stackView 사용 하기3(이전 화면의 정보 가져오기,get previous screen data)
안녕하세요 고급 개발자가 꿈인 코린이 입니다.
오늘은 stackview에서 이전 화면의 정보를 가져오는 방법에 대해서 포스팅하겠습니다.
stackview에서 이전화면의 정보를 가져오는 방법은 아주 중요합니다.
이전화면이 어떤 화면인가에 따라서 다음화면을 동적으로 표현 해줄수도 있고 이전화면에 따라서
다음화면의 제목이 바뀌는 경우도 있기때문에 이전화면의 정보를 가져오는것은
실무에서 아주 많이 쓰이는 것중에 하나입니다.
qml의 stackview에서 이전화면의 정보를 가져오는 방법은
previousItem = stackView.get(myItem.StackView.index - 1)) 입니다.
이 코드의 내용으로는 stackview의 현재 index에서 -1을 해주어서 이전화면의 item을 previousItem라는 변수에
담을수 있습니다. 그래서 previousItem은 stackview의 이전화면의 정보를 가지게 됩니다.
그리고 각화면에서 설정한 object값으로 이전화면이 어떻것인지 찾을수 있습니다.
아래의 코드로 설명 드리겠습니다.
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
|
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")
StackView
{
id:stackView
anchors.fill: parent
initialItem: Item //제일 첫화면을 설정하는 것으로 설정을 안하면 되돌아오기가 안된다.
{
objectName: "mainscreen"//이전화면에 대한 정보를 얻기위해 설정하는 값
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
{
id:nextButton
anchors.top:testText.bottom
anchors.horizontalCenter: parent.horizontalCenter
text:"go screen1"
onClicked:
{
console.log("push screen1")
stackView.push(Qt.resolvedUrl("qrc:/screen1.qml"))//다음 화면을 출력하기 위해 stack에 화면을 쌓는 코드
}
}
Button
{
anchors.top:testText.bottom
anchors.left:nextButton.right
anchors.leftMargin: 30
text:"go screen2"
onClicked:
{
console.log("push screen2")
stackView.push(Qt.resolvedUrl("qrc:/screen2.qml"))//다음 화면을 출력하기 위해 stack에 화면을 쌓는 코드
}
}
}
}
}
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4f; text-decoration:none">Colored by Color Scripter
|
screen1.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
|
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")
}
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: {
stackView.push(Qt.resolvedUrl("qrc:/screen2.qml"))//다음 화면을 출력하기 위해 stack에 화면을 쌓는 코드
//stack에 메인화면 두번째화면 세번째 화면이 쌓이게 된다.
}
}
Button
{
id:previousButton
anchors.top:testText.bottom
anchors.right: nextButton.left
anchors.rightMargin: 30
text:"go previous screen"
onClicked: {
console.log("pop screen1")
stackView.pop();//이전화면을 호출하기위해 stack의 제일 위에 화면을 밖으로 빼주어 첫화면을 보여준다.
}
}
}
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4f; text-decoration:none">Colored by Color Scripter
|
screen2.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
|
import QtQuick 2.0
import QtQuick.Controls 2.0
Item {
width: 640
height: 480
objectName: "screen2"//이전화면에 대한 정보를 얻기위해 설정하는 값
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:"go previous screen"
onClicked: {
stackView.pop();//이전화면을 호출하기위해 stack의 제일 위에 화면을 밖으로 빼주어 두번째 화면을 보여준다.
}
}
}
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4f; text-decoration:none">Colored by Color Scripter
|
위의 main.qml에 screen2로 가는 버튼을 추가하고 screen1.qml에 screen2로가는 버튼을 추가했다.
그리고 screen2에서는 이전화면이 어떻거냐에 따라서 onCompleted에서 맨위에 데이터를 변경시켜주는
로직을 넣었습니다. 그리고 각 화면에 objectName을 각 화면에 맞게 추가하였습니다.
그리고 previousItem의 objectName이 어떤것이냐에 따라서 screen2의 데이터가 mainscreen이나 screen1으로
설정을 해주었습니다.
위의 실행 동영상을 보시면 이전화면이 어떤 화면인지에 따라 screen2의 데이터가 변하는 것을 볼수 있습니다.
이렇게 이전화면의 정보를 알아서 동적으로 데이터를 설정하는 방법에 대해서 알아보았습니다.
감사합니다.
반응형
'QT and QML' 카테고리의 다른 글
| [C++,QT/Qml]13.Qml프로그래밍 cpp qml 연동2(qml 에서 C++ 함수 호출하기) (11) | 2019.06.29 |
|---|---|
| [C++,QT/Qml]12.Qml프로그래밍 cpp qml 연동1(c++에서 qml 함수 호출하기) (8) | 2019.06.23 |
| [C++,QT/Qml]10.Qml프로그래밍 stackView 사용 하기3(뷰 이동시 애니메이션 변경 하기) (14) | 2019.06.15 |
| [C++,QT/Qml]9.Qml프로그래밍 stackView 사용 하기2(뷰 시작시 데이터 넣기) (2) | 2019.06.12 |
| [C++,QT/Qml]8.Qml프로그래밍 stackView 사용 하기1 (0) | 2019.06.09 |