해커를 꿈꾸는 개발자

QT qml의 popup 표시하고 timer를 이용해 팝업 닫기

open 버튼을 누르면 팝업이 표시되고, 팝업이 표시되고 3초 이후 팝업이 자동적으로 닫히도록 만들어 보겠습니다. 또한 팝업에 문구 출력하고, 버튼도 추가하여, 팝업에 있는 버튼을 누르면 바로 팝업이 닫히도록 만들어 보겠습니다.

버튼(Button) 정의

버튼을 생성하였습니다. 

버튼을 클릭하면 팝업이 표시되고, 타이머를 시작하도록 하였습니다. 

    Button {
       id: mainButton
       text: "Open"
       onClicked:{
           popup.open()
           timer.start()
       }
    }

타이머(Timer) 정의

타이머를 생성하였습니다. 

타이머는 3000ms(3초) 뒤에 트리거가 발생되어 팝업이 닫히도록 하였습니다.

mainButton을 눌렀을 때, 타이머 시작되어 3초 이후 트리거가 발생됩니다. 

    Timer {
        id: timer
        interval: 3000; running: false; repeat: false
        onTriggered: popup.close()
    }

팝업(Popup) 정의

팝업을 생성하였는데, Label이 표시되도록 하였고, Button을 생성해 button을 누르면 팝업이 바로 닫히도록 하였습니다.

팝업이 닫힐 때에는 타이머를 정지 시킵니다. 

closePoli

팝업 표시된 부분 밖에를 눌러도 팝업이 닫히지 않게 하려면, 아래 코드를 넣습니다. 

Popup.CloseOnPressOutsideParentclosePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent

Popup {
       id: popup
       x: 100
       y: 100
       width: 200
       height: 300
       modal: true
       focus: true
       onClosed: timer.stop()
       Label {
            text:qsTr("This is popup")
       }

       Button {
          text: "Close"
          y: 200
          onClicked:{
              popup.close()
          }
       }
   }

전체 코드

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12

Window {
    width: 640
    height: 480
    visible: true

    Button {
       id: mainButton
       text: "Open"
       onClicked:{
           popup.open()
           timer.start()
       }
    }

    Timer {
        id: timer
        interval: 3000; running: false; repeat: false
        onTriggered: popup.close()
    }

   Popup {
       id: popup
       x: 100
       y: 100
       width: 200
       height: 300
       modal: true
       focus: true
       onClosed: timer.stop()
       Label {
            text:qsTr("This is popup")
       }

       Button {
          text: "Close"
          y: 200
          onClicked:{
              popup.close()
          }
       }
   }
}