[C++,QT/Qml]8.Qml프로그래밍 stackView 사용 하기1

[C++,QT/Qml]8.Qml프로그래밍 stackView 사용 하기1

 

 

 

 

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

 

오늘은 stackView에 대해서 포스팅 하겠습니다.

 

stackView는 단어 자체 만을 view를 stack에 넣어서 화면을 한개씩 보여주는 타입 입니다.

 

stack이라는 자체가 LIFO(Last In Frist Out) 스택에 마지막으로 들어간 것이  제일 먼저 삭제가 되는 

 

구조로 view가 마지막으로 들어간 것이 제일 먼저 삭제가 되는 것입니다.

 

예를들어 메인화면인 A라는 화면이 있을때 B라는 화면이 들어오면 B화면이 보여지다가 

 

B라는 화면이 우선 삭제가 되고 B라는 화면이 삭제가 되면 A화면이 보여지게 되는 구조 입니다.

 

stack의 구조

위와같은 구조이기 때문에 나중에 들어간 데이터가 제일 먼저 삭제가 됩니다.

 

stackView도 stack과 마찬가지로 나중에 들어간 view가 제일 먼저 삭제가 되는 구조 입니다.

 

아래 코드를 보면서 stackview에대해서 이해를 해보겠습니다.

 

 

1. main.qml(stackview를 설정해주고 첫화면을 그려주는 코드)

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  //제일 첫화면을 설정하는 것으로 설정을 안하면 되돌아오기가 안된다.
        {
            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:"go next screen"
                onClicked:
                {
                     stackView.push(Qt.resolvedUrl("qrc:/screen1.qml"))//다음 화면을 출력하기 위해 stack에 화면을 쌓는 코드
                }
            }
        }
    }
}
 
 
 

stackview첫번째 화면

2. screen1.qml (첫번째화면 다음으로 오는 화면 즉 2번째 화면을 출력하는 코드)

 

import QtQuick 2.0
import QtQuick.Controls 2.0
 
Item {
    width: 640
    height: 480
    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: {
            stackView.pop();//이전화면을 호출하기위해 stack의 제일 위에 화면을 밖으로 빼주어 첫화면을 보여준다.
        }
    }
}
 
 
 

 

stackview 2번째 화면

3. screen2.qml (두번째 화면 다음으로 오는 화면 즉 3번째 화면이 된다.)

 

import QtQuick 2.0
import QtQuick.Controls 2.0
 
Item {
    width: 640
    height: 480
    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의 제일 위에 화면을 밖으로 빼주어 두번째 화면을 보여준다.
        }
    }
}
 
 
 

stackview 3번째 화면

위의 메인 화면의 코드를 보겠습니다.

 

 

메인 화면에서는 stackview의 영역을 어떻게 잡아줄지 등 기본적인 stackview들의 설정들을 코딩합니다.

 

위의 코드에서는 stackview 영역을  anchors.fill: parent 로 잡아서 화면의 전제 영역을 stackview로 잡아 주었습니다.

 

그렇기 때문에 화면이 이동이 되면 천체화면이 바뀌게끔 되어있습니다.

 

그리고 go next screen 버튼의 push라는 함수를 이용해서 다음 화면 즉 다음 View(qml)을 넣어주도록

 

되어서 다음 화면이 보여지게끔 되었습니다.

 

2번째 화면의 코드를 go next screen 버튼 에는 다음 화면을 push 하고 go previous screen 버튼에는 pop이라는 

 

함수를 호출 합니다. 여기서 pop()이라는 함수는 현재 스택에서 제일 위에있는 view즉 현재화면을 

 

stack에서 제거 해주어 화면이 이전화면을 출력하게끔 하는 함수 입니다.

 

3번째 화면의 코드도 2번째 화면과 같이 뷰를 보여주는 코드로 go previous screen 버튼을 누르면 이전화면으로

 

돌아가게끔 코딩이 되어있습니다.

 

이렇게 3번째 화면까지 push가 되면 3번째화면이 가장 위에 보여지고 pop을 할때마다 view가 삭제가 되어서

 

2번째 화면이 출력되고 여기서 다시 pop을 하면 2번째 화면이 삭제가 되어서 첫번째 화면이 출력이 되는

 

구조를 가지고 있습니다.

 

여기 까지 기본적인 stackview를 이용해서 화면이 어떻게 다음화면으로 넘어가고 이전화면으로 넘어가는지를

 

보았습니다. 그러나 stackview를 실무에서 쓰다보면 이전화면의 화면이 어떤화면인지 알고 싶을때가 있고

 

이전화면에 데이터가 있는데 이 데이터를 현재화면에서 변경하고 싶을때, 현재 위의 코드는 다음 화면으로 넘어갈때

 

애니메이션 처리가 되어있는데 이런 애니메이션 처리를 없애거나 다른걸로 바꾸고싶을때 등 많은 내용을 실무에서 

 

사용해야 할때가 있습니다.

 

이런 부분은 앞으로의 포스팅에서 설명 드리겠습니다.

 

감사합니다.