[C++,QT/Qml]9.Qml프로그래밍 stackView 사용 하기2(뷰 시작시 데이터 넣기)

[C++,QT/Qml]9.Qml프로그래밍 stackView 사용 하기2(뷰 시작시 데이터 넣기)

 

 

 

 

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

 

오늘은 qml의 stackView에서 뷰 시작시에 데이터를 넣는 방법에 대해서 포스팅 하겠습니다.

 

실무에서 stackview를 사용하면 view를 시작하자마자 데이터들을 set해주어야 할때가 많습니다.

 

리스트가 있다면 리스트의 데이터를 넣어준다던가 아니면 게시판같은 화면같은경우에는 

 

게시판 내부에있는 글들을 가져화서 화면에 보여주어야하는데 이럴때 사용하는 방법에 대해서 설명 드리겠습니다.

 

qml에서는 item이 만들어지자 마자 호출하는 함수가 있는데 그 함수는 Component.onComplete라는 함수 입니다.

 

이 함수는 특정 타입이 생성이 되면 호출이 되는 것으로 이전 포트팅에서 stackview.push를 했을때

 

다음 화면이 처음 생성되면 처음으로 출력하는 함수입니다.

 

그래서 stackview.push 한 화면에서 데이터를 넣어줄때 Component.onComplete라는 함수 안에서 데이터들을 

 

설정해주면 됩니다.

 

아래의 코드를 보겠습니다.(이전 포스팅에 사용한 코드를 그대로 사용하겠습니다.)

1. 뷰가 시작되자마자 데이터를 세팅해준 코드

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의 제일 위에 화면을 밖으로 빼주어 첫화면을 보여준다.
        }
    }
}
 
 
 

 

 

2. 뷰가 시작되자마자 데이터를 세팅해준 코드

 

import QtQuick 2.0
import QtQuick.Controls 2.0
 
Item {
    width: 640
    height: 480
 
    Component.onCompleted: {//화면이 집입되고 item이 생성될때 처음으로 불려지는 함수
        testData.text = "screen1 Data"//화면이 집입되고 id가 testData인 텍스트를 변경 시킨다.
    }
 
    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의 제일 위에 화면을 밖으로 빼주어 첫화면을 보여준다.
        }
    }
}
 
 
 

 

위의 두 코드를 비교해보겠습니다.

 

첫번째 코드는 이미 만들었던 뷰를 그냥 출력해 주는 코드이고

 

두번째 코드는 Component.onCompleted: 라는 함수에서 id가 testData인 text 속성을 screen1 Data로 바꿔주는 

 

코드 입니다. 두 실행결과를 비교해봤을때 뷰가 시작 되자마자 첫번째는 text 타입에 미리 설정된 text 속성을 출력하고

 

두번째는 Component.onCompleted 라는 함수에서 변경된 text를 출력하는 것을 볼수 있습니다.

 

이런식으로 데이터들을 뷰가 시작 되자마자 변경이 되게끔 코딩할수 있습니다.

 

예를 들어 데이터들을 받아서 출력해주어야 한다면 Component.onCompleted 함수에서 특정 데이터를 받은 후에 

 

출력해야할 타입에 데이터들을 넣어주면 뷰가 시작되자마자 데이터들을 설정 해줄수가 있습니다.

 

그렇다면 뷰가 시작될때 출력되는 함수가 있다면 뷰가 삭제되었을때 불려지는 함수도 있겠죠??

 

뷰가 삭제 될때 불려지는 함수는 Component.onDestruction 함수입니다.

 

아래의 코드를 보겠습니다. 아래 코드에는 Component.onCompleted 에서 로그를 한번 찍고

 

Component.onDestruction에서 로그를 찍는 코드입니다.

 

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

뷰가 시작되고 끝났을때 로그

 

위의 실행 로그를 보시면 뷰가 시작되었을때 Componenet.onComplete라는 함수가 호출이 되어서 로그가 찍히는 것을 

 

확인할수가 있고 뷰가 끝났을때 Component.onDestruction라는 함수가 호출이 되어서

 

로그가 찍히는 것을 볼수가 있습니다.

 

위와같이 뷰가 끝났을때 즉 stackview.pop이 호출이 되어서 뷰가 삭제될때 어떠한 동작이 필요하다면

 

Component.onDestruction이라는 함수에서 동작을 시켜주면 됩니다.

 

여기 까지 stackview에서 뷰가 시작 및 끝났을때 호출하는 함수들에 대해서 보았습니다.

 

다음포스팅에는 스택뷰에서 화면이 이동될때 애니메이션을 없애주거나 다른 것으로 바꾸는 방법에 대해서 

 

설명 드리겠습니다.

 

감사합니다.!!